Safari浏览器中带有SVG元素的按钮无法触发点击事件

Question

在Safari浏览器中，当你点击带有SVG元素的按钮时，点击事件不会被触发。当你点击按钮边缘时，点击事件会被触发，但如果你直接点击SVG元素本身，则不会触发点击事件。

$(document).on('click', 'button', function(e) {
    console.log(e);
});

如果我像这样附加点击事件，它就可以工作：

$('button').on('click', function(e) {
    console.log(e);
});

由于动态添加了按钮，我不能像这样做;

在codepen.io中的示例 http://codepen.io/neilhem/pen/bdGYPq jQuery版本2.1.3

- Rakhat

Answer 1

我不知道这是否是解决此问题的最佳方法，但向svg元素添加pointer-events: none;解决了问题。

svg {
  pointer-events: none;
}

- Rakhat

---

哇！运行得非常好！谢谢！ - Armando Freire

非常感谢！这拯救了我的一天。 - csharpbd

Answer 2

svg {
  pointer-events: none;
}

有什么更好的解决方案吗？我经常遇到这个问题。

这对我有效。

- Alejandro Yunes