在 Firefox 中触发 mouseleave() 事件时的鼠标位置

Question

我试图检测 mouseleave() 事件触发后鼠标去了哪里。

$( "#menu li" )
.mouseleave(function(e) {       
    if($('#menu li:hover').length==0){
          //the mouse left menu         
    }else{

          //the mouse is pointing to another li
    }       
});

在 Opera、Chrome 和 IE 上，这可以正常工作。但在 Firefox 上，当鼠标仍在元素内时，mouseleave 事件似乎会触发。所以 $('#menu li:hover').length 的值总是 1。

我想出了一个丑陋的解决方法：用 setTimeout 函数包装 if 语句并给定间隔 1ms。当然，这并不总能解决问题。

有什么方法可以优雅地解决这个问题吗？

Answer 1

“我试图检测 mouseleave() 事件触发后鼠标去了哪里。”

我将只关注问题的这一部分，因为您对该问题的解决方案不是很好。相反，您应该只使用 e.relatedTarget 属性。这将为您提供指针在离开 li 时输入的节点。

$( "#menu li" ).mouseleave(function(e) {
  document.querySelector("pre").textContent += ("\nLeave LI, Enter " + e.relatedTarget.nodeName);
});

ul {
  padding: 30px;
  background: orange
  }
li {
  padding: 10px;
  background: yellow
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="menu">
  <li>first
  <li>second
  <li>third
</ul>
<pre></pre>

文档甚至给出了一个类似于你的例子：

http://api.jquery.com/event.relatedTarget/

$( "a" ).mouseout(function( event ) {
    alert( event.relatedTarget.nodeName ); // "DIV"
});