相对于SVG元素找到鼠标指针的位置

Question

我有一个如下所示的 scg 元素。

<svg height="300px" width="600px" xmlns="http://www.w3.org/2000/svg">
  <g id="100" onmouseout="outg()" style="stroke-width: 1;fill: rgb(255, 200, 200);">
   <rect height="25" rx="10" ry="10" style="fill: rgb(257, 87, 87);" width="160" x="330" y="35" />
    <text style="stroke: rgb(0, 0, 0);stroke-width: 1;" x="390" y="53" >ABC</text>
  </g>
</svg>

我如何确定鼠标指针是否在矩形内(但在svg内部)。当我尝试使用简单的警报调用javascript函数来处理'rect'、'g'、'text'的onmouseout事件时，会有点混乱。在矩形内部，当我将鼠标指向文本时，技术上已经退出了矩形并进入了文本区域。

我需要确定鼠标指针完全离开矩形，并且这必须仅发生一次，而不是在穿过矩形内的文本区域或从文本区域出到矩形内时。

- Adarsh

Answer 1

如果您正在使用jQuery，您可以利用jQuery的mouseleave/mouseenter事件，它们不会有这个问题。

jQuery API文档对此进行了很好的描述：

mouseleave事件与mouseout在处理事件冒泡方面不同。如果在此示例中使用mouseout，则当鼠标指针移出Inner元素时，将触发处理程序。这通常是不希望的行为。另一方面，mouseleave事件仅在鼠标离开绑定到其上的元素而不是后代元素时触发其处理程序。因此，在此示例中，当鼠标离开Outer元素但不是Inner元素时，将触发处理程序。

来源及示例：http://api.jquery.com/mouseleave/ 如果您没有使用jQuery并且愿意进行一些修改，我建议您查看jQuery mouseleave事件的源代码，这将希望为您指明正确的方向。

- Bacon