javascript - 当鼠标移动到 SVG 对象上时，如何接收当前鼠标位置？

Question

我有一个 div，里面有很多 SVG 对象。

<div id="outerDiv">
 <div id="widget1">
   <object type="image/svg+xml" data="my.svg"></object>
 </div>
 <div id="widget2">
   <object type="image/svg+xml" data="my.svg"></object>
 </div>
 <div id="widget3">
   <object type="image/svg+xml" data="my.svg"></object>
 </div>
...
</div>

当光标位于这些 SVG 对象之一上时，如何接收当前鼠标位置？

旁注:没有像 D3、Snap 这样的外部库......只允许使用 jQuery。

这不起作用，因为当我在 SVG 对象上移动时没有收到任何 mousemove 事件。

var mousemoveHandler = function (event) {
    event.preventDefault();
    console.log("doc.mousemove: " + event.pageX + " " + event.pageY);
};
$(document).on("mousemove", mousemoveHandler);

此外，SVG 元素(例如不可见的 g 元素)上的 mousemove 处理程序仅返回相对鼠标位置。

编辑: SVG 对象没有任何可能停止事件传播的事件处理程序。

Answer 1

对象元素中的 SVG 元素正在处理所有鼠标事件。您可以通过将样式 point-events: none 添加到对象标签来关闭此功能。