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>