查找相对于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事件，它会让人感到有些困惑。 当我指向文本时，在矩形内，技术上退出矩形并输入文本。

我需要确定鼠标指针完全在矩形之外，这必须只发生一次，而不是跨越到矩形内的文本区域或者从文本区域进入矩形。

Answer 1

如果您正在使用jQuery，则可以使用没有此问题的jQuery mouseleave / mouseenter事件。

jQuery API文档很好地描述了它：

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

来源，举例： http ： //api.jquery.com/mouseleave/

如果你不使用jQuery并且你愿意做一些黑客行为，我建议你看一下jQuery mouseleave事件的来源，希望能指出你正确的方向。