如何使图像可聚焦？

Question

在另一个question中，有人建议图像可以聚焦吗？怎么能实现这个目标呢？

更多信息：

在另一个问题中，昆汀说：

 var img= $("#my-image-id");
    image.click(function() {
    // your code here
    }

  

不要这样做。图像不可聚焦（因为图像不是   旨在成为交互式控件）。人们使用（例如）a   键盘在页面中导航（而不是指点设备）   像鼠标一样）将无法导航到图像并激活   控制。

其他人说：

  

在你的情况下，你想保持“焦点”（我假设与   标签支持），如果您使用单个按钮（使用或   没有），你将不得不添加一些JS代码来制作图像   按下适当的选项卡时可对焦。所以你必须这样做   写一些代码来做同样的事情。

Answer 1

要使图像（或任何元素）可聚焦，只需添加tabindex属性。

<img src="myimage.png" tabindex="1" />

但请注意，只需让图像响应click事件，就不需要任何特殊处理。

Answer 2

您可以在img内放置button。

因此，焦点将到达按钮，点击事件可以绑定到按钮，但它看起来就像图像具有焦点一样。