带有SVG onclick的HTML <div>问题
带有SVG onclick的HTML <div>问题
提问于 2018-12-03 23:36:58
我有一个带有子对象标签的父div，其中包含我的svg。
我试图捕获我的图像上的点击，但它不起作用。
在示例代码片段中，仅当在所显示的svg之外单击时才会显示警报。
HTML：
<div class="calendarWidget" onclick="alert('test');">
<span>
<object onclick="alert('test1');" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
</span>
</div>CSS：
.calendarWidget {
position: fixed;
max-width: 200px;
width: 200px;
right: 20px;
bottom: 20px;
background-color:green;
z-index: 1;
}由于我的要求，我不能在svg中编写脚本代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-04 01:35:57
可能最简单的方法是将处理程序放在div上，并使用css pointer-events: none;将浏览器设置为忽略svg上的鼠标事件。运行下面的代码片段，看看它是如何工作的(为了演示，我将svg移到了左上角)。
.calendarWidget {
position: fixed;
max-width: 200px;
width: 200px;
left: 20px;
top: 20px;
background-color:green;
z-index: 1;
}
.ignoreMouse{
pointer-events: none;
}<div class="calendarWidget" onclick="alert('test');">
<span>
<object class="ignoreMouse" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53596986
复制相关文章
相似问题