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无响应的资料请关注脚本之家其它相关文章！
相关文章
我们知道，数组的sort方法可以对数组元素进行排序，默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比较函数作为参数。这里讲的就是如何写这个比较函数。2010-07-07
这篇文章主要介绍了JavaScript设计模式适配器模式实例，适配器设计模式可以让彼此不兼容的功能在一块工作，有助于避免大规模的修改代码，并且易于扩展和兼容2022-06-06
本文主要分享了原生js实现中奖信息无间隙滚动效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域，感兴趣的朋友参考下吧2016-04-04
这篇文章主要为大家详细介绍了js实现窗口全屏示例，包含全屏事件、退出全屏事件等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
改善性能的最好方法之一是避免重复两次相同的工作。因此，只要可以缓存结果供以后使用，就可以加快程序的速度。延迟加载属性模式技术使任何属性都可以成为缓存层以提高性能。这里说到的延迟加载属性模式就是利用的访问器属性，将计算昂贵的操作推迟到需要时再使用2021-06-06
这篇文章主要为大家详细介绍了小程序实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了微信小程序动态生成二维码的实现代码,需要的朋友可以参考下2018-07-07
下面小编就为大家带来一篇js获取新浪天气接口的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
js中动态创建json,动态为json添加属性、属性值的实例
下面小编就为大家带来一篇js中动态创建json,动态为json添加属性、属性值的实例。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
最新评论