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无响应的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

深入解析Parcel如何进行自定义配置
Parcel 是现代前端开发中不可或缺的工具之一,以其“零配置”的特性迅速赢得了开发者的青睐,本文将通过几个实例详细介绍如何进行 Parcel 的自定义配置,感兴趣的小伙伴可以了解下
2024-12-12
浅析前端JS脚本放在head与body对加载的影响以及优化策略
JS放在不同位置确实有重要区别,这涉及到页面加载性能、用户体验和代码执行时机等多个方面,下面我们就来看看JS脚本放在head与body是如何影响加载的以及优化策略
2025-12-12
JS实现链表数据结构的代码详解
很多前端的同学对数据结构和算法这块没有太多的概念,很多leetcode的题目看不懂,有时候可能看了题解也不知道是什么意思,这篇文章咱们来简单的谈一谈链表,文中给大家介绍了JS实现链表数据结构的示例代码,需要的朋友可以参考下
2024-01-01
JS实现模态框拖拽动态效果
这篇文章主要为大家详细介绍了JS实现模态框拖拽动态效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript对象类型转换的分类及步骤详解
这篇文章主要为大家介绍了JavaScript对象类型转换的分类及步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
layui获取多选框中的值方法
今天小编就为大家分享一篇layui获取多选框中的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
详解在HTTPS 项目中使用百度地图 API
这篇文章主要介绍了在HTTPS 项目中使用百度地图 API，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
JavaScript笔记之import和require的区别与对比
在JavaScript中,require和import都用于模块导入,这篇文章主要介绍了JavaScript笔记之import和require区别与对比的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-01-01
js位运算在实际中使用的实例教程
我们可能很少在编程中用位运算,如果没深入学习,可能也很难理解,下面这篇文章主要给大家介绍了关于js位运算在实际中使用的相关资料,需要的朋友可以参考下
2022-03-03
Bootstrap媒体对象学习使用
这篇文章主要为大家详细介绍了Bootstrap媒体对象的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03