javascript - 在 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

"I was trying to detect where did the mouse go after the mouseleave() event has been fired."

我将重点关注问题的这一部分，因为您对该问题的解决方案并不好。相反，您应该只使用 e.latedTarget 属性。这将为您提供指针在离开 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"
});