img onkeydown 不起作用

Question

为什么此代码不能正常工作？

<img src="picture.jpg" id="picture"/>
<script>
document.getElementById('picture').onkeydown = function() {alert('tekst');}
</script>

Answer 1

您的图像没有焦点，因此不会侦听"onkeydown"事件。我不确定是否可以为onkeydown事件提供图像焦点。

相反，你可以把你的图像放在一个a标签中，这个标签可以有焦点，因此可以监听onkeydown事件。

类似这样的东西：

<a id="picture" href="#">
    <img src="picture.jpg" />
</a>
<script>
   // The a tag
   var picture = document.getElementById('picture');
   // You have to put focus on the atag (or any element that you want to have for you onkeydown event.
   picture.focus();
   // Now your event will work
   picture.onkeydown = function() {
       alert('tekst');
   }
</script>