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

The mouse position when firing mouseleave() event in Firefox

本文关键字：事件 鼠标 位置 Firefox mouseleave      更新时间：2023-09-26

我试图检测鼠标在触发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。 当然，这并不总是能解决问题。

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

"我试图检测鼠标在触发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"
});
相关文章：