单击侦听器事件不会在 SVG 元素上触发（字体真棒图标）

Posted 2023-02-23

【中文标题】单击侦听器事件不会在 SVG 元素上触发（字体真棒图标）

【英文标题】：Click listener event doesn't fire on SVG element (font awesome icon)

【发布时间】：2019-11-21 15:08:03

【问题描述】：

页面上有 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 类添加到字体真棒图标以外的任何其他元素，单击时它将正确触发。此外，如果我将 JS 复制并粘贴到控制台并运行它，则单击 SVG 元素会触发事件。

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

工作解决方案：

.close
  = icon :times

【问题讨论】：

尝试委托事件：$(document).on('click', '.close', closeDialog);

这可能是由于一些不同的原因。请创建一个minimal reproducible example，以便我们在实际示例中查看问题。

【参考方案1】：

尝试在这里查看，这里有关于如何处理 SVG 元素的点击事件的信息。如果它设置为 none 或其他一些奇怪的选项，它不会检测到 SVG 上的点击

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

【参考方案2】：

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

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

.element svg
  pointer-events: none;