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事件。所以$（＆＃39; #menu li：hover＆＃39;。）长度的值始终为1.

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

有没有办法优雅地解决这个问题？

Answer 1

＆＃34;我试图检测mouseleave（）事件被触发后鼠标去了哪里。＆＃34;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

在Firefox中触发mouseleave（）事件时的鼠标位置

1 个答案: