javascript - 如何为 <img> 标签使用模糊事件

Question

当我单击屏幕上除图像之外的任何位置时，我需要关闭 div。 onblur 函数甚至没有调用 alert。请帮忙。

$('.myClass').on('blur', function() {
  alert("test");
  $('.divClass').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="myImg.png" height="23" width="18" class="myClass" style="margin-top: -42px!important;margin-left: 145px !important;position:relative;" onclick="test()" />

Answer 1

<img>默认情况下，元素无法获得焦点。如果他们无法集中注意力，那么他们就不会失去焦点，从而触发 blur事件。虽然您可以使用 tabindex要改变这一点，您需要做一些其他工作(例如添加 ARIA)以使其易于访问。您最好一开始就使用语义 HTML。

1. 包裹 <img>与 <button type="button">元素。
2. 将事件处理程序从 img 移出到button
3. 根据需要应用 CSS 删除按钮的默认样式(例如边框和背景颜色)。