jquery - 使用 <use> 元素时,SVG 单击事件不会触发/冒泡

标签 jquery svg click blink

我遇到了一个有趣的错误(?),如果您使用 作为链接(例如图标)的一部分嵌入 SVG – 图标本身不会在 jQuery 中注册单击事件,而是单击文本确实如此。我认为这是由于 SVG 事件没有冒泡造成的?

如果直接嵌入 SVG,则无论单击文本还是图标都会触发链接。

我创建的一个简单的测试用例可以在这里看到: SVG <use> bug test case .

最佳答案

在 svg 上使用 pointer-events: none;。它对我有用。

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

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

关于jquery - 使用 <use> 元素时,SVG 单击事件不会触发/冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24078524/

相关文章:

jQuery Ajax 上传,必须单击按钮两次?

javascript - 点击ID并打开URL?

javascript - 选择输入 - Angular 2

javascript - 向 svg g 元素添加填充

javascript - 我怎样才能填充已经穿过的svg路径?

css - 制作一个真正 flex 的容器,里面有图像

c# - 单击 DataGridView 时出现 IndexOutOfRangeException 错误

Javascript/CSS3 转换问题

jquery-plugins - JQuery Masonry - 锁定 div 仅垂直移动

javascript - React - '$' 未定义