选择在 Mozilla Firefox 中的父元素上触发 MouseLeave 事件

Question

我有以下问题：在 Mozilla Firefox 中，每当我将a悬停dropdown 在表格内时，它都会触发mouseleave表格事件，尽管鼠标光标仍在表格内。在 Chrome 或 Edge 中没有这样的问题。

这是我的带有示例数据的代码：

演示

我有一个表格，当鼠标光标进入表格时，最后一行出现。当鼠标离开 - 行隐藏。只有当我离开桌子时，该行才应该隐藏

是否有某种方法或解决方法可以防止发生不必要的 mouseleave 事件？

Answer 1

我在 VueJS 中遇到了同样的问题，我像这样修复了它。首先确保事件对象传递给你的方法，因此使用@mouseleave="myEvent"代替@mouseleave="myEvent()"。

    myEvent: function(event) {
      if (event.relatedTarget === null) {
        return;
      }
      // consider event fired
    },

所以检查event.target.nodeName对我不起作用，我不得不使用event.relatedTarget.

Answer 2

您可以像这样测试 mouseleave 上的选择：

$('.testTable').mouseenter(function(e) {
    console.log("IN!")
    $("#lastRow").show();
}).mouseleave(function(e) {
    if (e.target.nodeName.toLowerCase() !== "select") {
        console.log("OUT!")
        $("#lastRow").hide();
    }
}); 

在这里拉小提琴。