svg插入foreignObject无法响应事件解决
更新时间：2023年10月17日 10:48:39 作者：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无响应的资料请关注脚本之家其它相关文章！
相关文章
javascript获取ckeditor编辑器的值(实现代码)
这篇文章主要介绍了javascript获取ckeditor编辑器的值，用于表单验证。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
本文主要介绍了JavaScript宏任务和微任务执行顺序，结合实例代码进行了详细的讲解，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
通过Javascript创建一个选择文件的对话框代码，需要的朋友可以参考下2012-06-06
使用CoffeeScrip优美方式编写javascript代码
CoffeeScript就是JavaScript，他进行的是一对一的编译，或者说是翻译，而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码，感兴趣的朋友一起看看吧2015-10-10
这篇文章主要介绍了nestjs返回给前端数据格式的封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
由JavaScript中call()方法引发的对面向对象继承机制call的思考
看到这里的call()方法，以前也看过手册，说是对象冒充的，用于继承的。在jQuery源码里有点乱，所以就把这部分提取出来，放在一个单独文件中，来看看具体执行。2011-09-09
这篇文章主要介绍了基于JS绘制2021的烟花效果，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
一转眼已经腊月了,相信小伙伴们一定想知道我们距离2023新年还有多少天,下面这篇文章主要给大家介绍了关于如何一步步教你用js简单实现新年倒计时的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了微信小程序框架的页面布局代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了基于打包工具Webpack进行项目开发实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论