Question

我有一个带有子对象标签的父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;
}

JSFiddle

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

Answer 1

最简单的方法可能是将处理程序保留在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>

带有SVG onclick问题的HTML <div>

1 个答案: