使用< use>时，SVG点击事件无法触发/冒泡元素 [英] SVG click events not firing/bubbling when using <use> element
问题描述
我遇到了一个有趣的错误(?)，如果您使用< use>作为链接的一部分(例如，图标)嵌入SVG，则图标本身不会在jQuery中注册click事件，而是单击文字确实如此.我认为这是由于SVG事件没有冒泡吗?
I have come across an interesting bug (?) whereby if you embed the SVG using <use> as part of a link (an icon for example) – the icon itself does not register a click event in jQuery, but clicking the text does. I think this is due to SVG events not bubbling up?
如果直接嵌入SVG，则无论您单击文本还是图标，链接都会触发.
If you embed the SVG directly, the link triggers regardless of whether you click the text or the icon.
我创建的一个简单的测试用例可以在这里看到: SVG< use>错误测试案例.
A simple test case I created can be seen here: SVG <use> bug test case.
推荐答案
在svg上使用pointer-events: none;.它对我有用.
Use pointer-events: none; on the svg. It worked for me.
该元素绝不是鼠标事件的目标；但是，鼠标事件 可以针对其后代元素(如果这些后代具有 指针事件设置为其他值.在这种情况下，鼠标 事件将触发此父元素上的事件侦听器，如下所示: 在活动期间适合去往/离开后代的方式 捕获/气泡阶段.
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/zh-美国/docs/Web/CSS/pointer-events
这篇关于使用< use>时，SVG点击事件无法触发/冒泡元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
