3

我有一个如下所示的 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 内部）。当我尝试为'rect'，'g'，'text'的onmouseout事件调用带有简单警报的javascript函数时，它变得有点混乱。当我指向文本时，在矩形内，从技术上讲，矩形退出并输入文本。

我需要确定鼠标指针完全不在矩形范围内，并且这只发生一次，而不是越过矩形内的文本区域或超出文本区域进入矩形。

4

1 回答 1

1

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

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

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

来源，带有示例：http ://api.jquery.com/mouseleave/

如果您不使用 jQuery 并且您愿意做一些黑客行为，我建议您查看jQuery mouseleave 事件的源代码，这有望为您指明正确的方向。

于 2013-04-14T17:31:21.503 回答