Question

我有一个包含许多SVG对象的div。

<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元素上的mousemove处理程序（例如不可见的g元素）仅返回相对鼠标位置。

修改 svg对象没有任何可能会阻止事件传播的事件处理程序。

Answer 1

对象元素中的SVG元素正在处理所有鼠标事件。您可以通过将样式pointer-events：none添加到对象标记来关闭它。

Answer 2

您的活动mousemoveHandler永远不会被触发。改为使用

$('object').hover(mousemoveHandler);

如果这不起作用，您可以在您的小部件上添加一个类并绑定到该类。

编辑：

    <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>

正确的html代码用另一个标签关闭。

更改<object type="image/svg+xml" data="my.svg"/>
到<object type="image/svg+xml" data="my.svg"></object>

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

2 个答案: