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函数时，对于＆＃39; rect＆＃39;＆＃39;＆＃39;＆＃39;文本＆＃39;的onmouseout事件，它会有点混乱。当我指向文本时，在矩形内，技术上退出矩形并输入文本。

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

Answer 1

如果你正在使用jQuery，你可以使用没有这个问题的jQuery mouseleave / mouseenter事件。

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

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

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

如果你没有使用jQuery并且你愿意做一些黑客攻击，我建议你看看the source for the jQuery mouseleave event，这有望指向你正确的方向。

查找相对于svg元素的鼠标指针位置

1 个答案: