使用<object>中的SVG可以允许单击事件传播到父处理程序吗？
使用<object>中的SVG可以允许单击事件传播到父处理程序。在SVG中，可以通过在<object>元素中添加pointer-events属性来控制事件的传播行为。pointer-events属性有不同的取值，其中包括"none"、"visiblePainted"、"visibleFill"、"visibleStroke"、"visible"、"painted"、"fill"、"stroke"、"all"等。
如果想要允许单击事件传播到父处理程序，可以将<object>元素的pointer-events属性设置为"none"。这样，当用户单击<object>元素时，事件将会穿透<object>元素并传播到父元素上，从而触发父元素上的事件处理程序。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>SVG Click Event Propagation</title>
</head>
<body>
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" onclick="alert('Rectangle clicked!')"></rect>
<object data="image.svg" type="image/svg+xml" width="100" height="100" style="pointer-events: none;"></object>
</svg>
</body>
</html>在上述代码中，当用户单击<object>元素所包含的SVG图像时，实际上会触发父元素中的矩形的点击事件处理程序，弹出一个警示框显示"Rectangle clicked!"。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
从HTML添加SVG似乎会创建一个无响应的空间，在该空间中单击事件不会通过SVG和<object>元素传播。 在本例中，这是通过单击按钮中心进行演示的。单击操作似乎不会将事件传播到父元素按钮。但是，当单击按钮的边缘(远离SVG)时，将调用click事件。 }) <butto
浏览 39提问于2020-09-16得票数 1
回答已采纳
4回答
我有一个按钮(样式来自div标签，jquery UI)和一个输入文本框。我希望如果我点击文本框，按钮也不会被点击。
浏览 1提问于2011-07-17得票数 3
回答已采纳
我正在创建一个作为属性接收链接、按钮或其他反应组件(子)的React组件(父)，并且我希望附加一个单击处理程序到传递的组件上。这个子组件通常已经定义了一个单击处理程序，所以我不能只使用onClick向它添加React.cloneElement。此外，有时子组件的单击处理程序会阻止事件传播到父组
浏览 5提问于2017-02-20得票数 2
回答已采纳
这意味着父元素中包含的元素上的任何事件都不会“冒泡”到父元素，如下所示：
这就是我如何理解它的工作原理，以及我如何合理地使我的解决方案发挥作用:对于刷牙，事件将传播到祖先元素。在我的例子中，我将一个' rect‘元素添加到svg中，如文档中的示例所示，并将缩放行为附加到rect。因此，具有缩放操作<
浏览 1提问于2020-01-15得票数 1
1回答
我已经在窗格上添加了mouselistener，这样当用户单击它时，它就会改变颜色(以标记选择)。但是，click事件并没有从子事件传播到父事件。因此，如果我点击文本文件，我的父母的颜色不会改变。尝试触发父级上的单击事件，但无法找到任何可手动触发事件的工作核心。
有任何方法可以通过事件来实现这一点，而不是在<e
浏览 4提问于2014-08-25得票数 0
回答已采纳
我在页面上有许多可点击的元素，在加载资源之前不应该启用这些元素。我的想法是使用.disabled类初始化按钮，然后在资源准备就绪时删除该类。同时，我将在.disabled单击事件上设置一个处理程序，以防止事件传播到其他处理程序。
问题是，即使我先添加了.disabled处理程序，我也无法在其他单击处理程序之前触
浏览 1提问于2013-10-17得票数 0
回答已采纳
考虑到事件触发器上的这两个jquery在使用第一个颜色框之前，我不得不点击两次锚标签。对于随后的点击，它不需要第二次点击来触发。但是对于第二个，颜色盒是在第一次
浏览 4提问于2013-04-29得票数 3
3回答
我有一个华而不实的下载按钮，我的域名使用DrawSVG，CustomEasy和TweenMax。然而，我似乎想不出如何触发下载。 display: flex;
alig
浏览 0提问于2018-01-03得票数 0
回答已采纳
这是我的密码： <div> <span>Hello Again</span> $("b").text($(this).parents().length);</script>
问题是当我点击一个spa
浏览 0提问于2014-03-16得票数 2
回答已采纳
我读了几篇关于event.stopPropagation();的文章，但没有一个解决方案适合我。基本上，我有一个折叠窗口小部件，默认情况下所有元素都会折叠。在每个元素标题(dt标记)上也有一个复选框。单击复选框不会触发accordion使其元素展开。</p>单击span (应该是一个复选框)应该向它添加“选中”的类。但是，它也会展开accordion元素(dd标记)。我在jQuery中做的是：
$('.accordion
浏览 1提问于2012-04-09得票数 0
2回答
我有一个具有重叠元素的SVG，绝对定位。这些元素包含在layers (使用SVG )标记中，因此可能并不总是有一个共同的父级。
在D3中，元素可以响应它们捕获的单击事件。我想知道是否有一种方法可以在保留拖动事件的同时通过元素传递单击事件-如果可能的话，就像“抛出”事件一样。我
浏览 3提问于2013-11-13得票数 1
2回答
我有一个SpannableString集作为我的TextView的文本，它位于另一个具有单击处理程序的视图中。我的文本里有ClickableSpan，你说得对，可以点击。我的问题是，在可单击范围内单击时，需要捕获触摸事件，而不是传播到父视图(因为父视图有另一个单击处理程序)。
浏览 4提问于2016-06-25得票数 2
回答已采纳
5回答
这个代码块触发了一个最大调用堆栈错误： $("#resume_upload").trigger("click");这是它引用的HTMLresume_upload" type = "file" name = "resume" style = "display: none" />我已经检查过了，JS文件或相同名
浏览 7提问于2017-01-04得票数 1
回答已采纳
我正在寻找一种方法来点击一个单一的‘stopPropagation()’触发器的点击组件的点击事件。下面是一个下拉列表的示例，其中打开/关闭单击事件被传播到父折叠标头，这会导致面板折叠/展开，这是不需要的：
请注意，可以停止按钮和菜单项的单击事件在相应的事件处理
浏览 21提问于2021-03-18得票数 1
但是，我今天决定要为SVG元素创建一个悬停效果。我必须将img标记更改为对象，以允许样式/动画。type = "image/svg+xml"></object>问:在处理</
浏览 2提问于2016-04-22得票数 2
我使用jQuery的on()函数将事件绑定到容器div，并提供了一个选择器".myItem“。$container.on('click', '.myItem', { me: this }, MyClass.prototype.onItemClick);
除了没有"myItem“类的子元素仍然导致事件触发之外这是正确的行为吗？选择器将匹配具有"myItem“类及其子元素的元素？<
浏览 0提问于2012-06-12得票数 1
回答已采纳
1回答
我试图做一个简单的隐藏&显示一个DOM点击事件，我是显示loadMenu容器点击span#dwnTrigger。但我的问题是，即使当我点击div#loadMenu时，这个div#loadMenu也被隐藏了。我不知道这怎么会发生，因为事件是附加到span#dwnTrigger。
浏览 1提问于2015-09-17得票数 0
回答已采纳
1回答
</ul> <li>Item 3</li> </li>在开始的时候只有最高级的显示else { } });
如果用户单击一个兄弟
浏览 3提问于2013-11-14得票数 0
回答已采纳
我想拦截每一个触摸事件在一个给定的布局。并将事件传播到触摸区域中的任何可单击视图。
(a)在顶级容器视图中重写onInterceptTouchEvent (MotionEvent ev)方法；或(b)可以重写Activity.onUserInteraction事
浏览 5提问于2014-05-08得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
