svg插入foreignObject无法响应事件解决
作者：frontoldman
这篇文章主要为大家介绍了svg插入foreignObject无法响应事件解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
svg插入foreignObject无法响应事件
svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候，不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素，直接定位到最外部的svg。
解决pointer-events
经排查是html中样式pointer-events导致
/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */ /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset;
值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
改成stroke就可以响应事件了
svgText = svgText .replace(/pointer-events:\s*none/g, 'pointer-events: all') .replace(/pointer-events/="none"/, 'pointer-events="stroke"')
以上就是svg插入foreignObject无法响应事件解决的详细内容，更多关于svg插入foreignObject无响应的资料请关注脚本之家其它相关文章！