带有 SVG onclick 问题的 HTML <div>答案

【问题标题】：HTML <div> with SVG onclick issue带有 SVG onclick 问题的 HTML <div>
【发布时间】：2018-12-04 18:40:15
【问题描述】：

我有一个带有子对象标签的父 div，其中包含我的 svg。

我正在尝试捕捉对我的图片的点击，但它不起作用。

在示例代码 sn-p 中，只有在显示的 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;
}

JSFiddle

由于我的要求，我无法在 svg 中编写脚本代码。

【问题讨论】：

您只需要捕获对 svg 的点击吗？
是的，当点击 svg 图像时，我需要使用 ajax 获取数据并在引导模式中显示。
stackoverflow.com/questions/25916403/…
在包装 <span> 上尝试 onclick 事件。无法单击<object> 元素。
您使用<object> 有什么原因吗？对对象元素的点击会传递给子元素来处理。因此你的问题。为什么不直接使用 <img> 元素呢？

标签： jquery html css svg z-index

【解决方案1】：

可能最简单的方法是将处理程序保留在 div 上，并将浏览器设置为使用 css pointer-events: none; 忽略 svg 上的鼠标事件。运行下面的 sn-p 以查看它是否有效（为了演示，我将 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>

【讨论】：