查找相对于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，那么当鼠标指针移出Inner元素时，处理程序将被触发。这通常是不受欢迎的行为。另一方面，mouseleave事件只在鼠标离开绑定元素时触发其处理程序，而不是后代。所以在这个例子中，当鼠标离开Outer元素时触发处理程序，而不是Inner元素。

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

如果你不使用jQuery和你愿意做一点黑客，我建议考虑看看the source for the jQuery mouseleave event，这将有望指向你在正确的方向。