jquery - HTML带有 SVG onclick 问题
问题描述
我有一个带有子对象标签的父 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 中编写脚本代码。
解决方案
可能最简单的方法是将处理程序保留在 div 上,并将浏览器设置为使用 css 忽略 svg 上的鼠标事件pointer-events: none;
。运行下面的代码片段以查看它是否有效(为了演示,我将 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>
推荐阅读
- python - 检查坐标是否在坐标系的某个区域内
- php - PHP:preg_replace 仅数组中的第一个匹配字符串
- javascript - 如何使用 openpgp.js 加密字符串?
- python - 如何从 TreeView Widget 获取特定值
- android - 如何将属性添加到 Xml?
- android - React Native Android 获取设备的比例
- reactjs - React/Redux Launch 另一个组件的状态变化
- javascript - NativeScript viewModel 可以具有“计算”属性吗?
- c# - 自动售货机的 C# 列表框和值
- batch-file - 批处理文件中的动态子字符串