image - img onkeydown 不起作用

Question

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

<img src="picture.jpg" id="picture"/>

<script>
document.getElementById('picture').onkeydown = function() {alert('tekst');}
</script>

Answer 1

您的图像没有焦点，因此它不会监听“onkeydown”事件。我不确定是否可以提供图像焦点以使您的 onkeydown 事件起作用。

相反，您可以将您的图像放在一个可以有焦点的 a-tag 中，因此可以监听 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>