查找相對於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，這將有望指向你在正確的方向。