单击侦听器事件不会在 SVG 元素上触发(FontAwesome图标)

Question

页面上

有类close的图标(图标是关闭div的x(。在浏览器中，字体 awesome 在 HTML 中作为<svg>元素加载，<path>元素作为子元素加载。使用slim，代码如下：

= icon :times, class: 'close'

事件侦听器被添加到 JS 中的图标中，如下所示：

(function($) {
  function closeDialog() { ... }
  $(document).ready(function() {
    $('.close').on('click', closeDialog);
  }
})(jQuery);

页面加载后，单击 X 图标时不会触发该事件。但是，如果我将 close 类添加到 font-awesome 图标以外的任何其他元素，则单击时它将正确触发。另外，如果我将JS复制并粘贴到控制台中并运行它，则单击SVG元素会触发事件。

目前，我的解决方案是将 SVG 包装在一个div 中，并为div 提供 close 类。它有效，但我想了解为什么原版没有。

工作解决方案：

.close
  = icon :times

Answer 1

尝试在此处查看，其中包含有关如何处理 SVG 元素的单击事件的信息。如果将其设置为 none 或其他一些奇数选项，则不会检测到 SVG 上的点击

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

此问题类似于按钮或跨度或其他东西上有 SVG 图标，然后单击该图标但父级的事件没有被触发

将pointer-events设置为 none 以允许点击通过，如果您的图标是 SVG，如下所示的内容会有所帮助：

.element svg{
  pointer-events: none;
}