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

【问题标题】：Finding the mouse pointer position relative to an svg element查找相对于 svg 元素的鼠标指针位置
【发布时间】：2013-04-14 17:05:46
【问题描述】：

我有一个如下所示的 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函数时，它变得有点混乱。当我指向文本时，在矩形内，从技术上讲，矩形会退出并输入文本。

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

【问题讨论】：

标签： javascript html svg onmouseover onmouseout

【解决方案1】：

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

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

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

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

如果您不使用 jQuery 并且您愿意做一些黑客攻击，我建议您查看the source for the jQuery mouseleave event，它有望为您指明正确的方向。

【讨论】：