Question

页面上有close类的图标（该图标是一个x，它关闭div）。在浏览器中，真棒字体在HTML中以<svg>元素的形式加载，而以<path>元素作为子元素。使用slim，代码如下：

= icon :times, class: 'close'

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

(function($) {

  function closeDialog() { ... }

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

})(jQuery);

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

当前，我的解决方案是将SVG包装在div中，并为div提供close类。它可以工作，但是我想了解为什么原始文件不起作用。

工作解决方案：

.close
  = icon :times

Answer 1

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

Answer 2

此问题类似于在按钮或跨度上有SVG图标时，您单击该图标但未触发父级事件

将pointer-events设置为none以允许点击通过，如果您的图标是SVG，则类似以下操作会有所帮助：

.element svg{
  pointer-events: none;
}