Question

我遇到以下问题：在Mozilla Firefox中，每当我将dropdown 悬停在表中时，它会触发表的mouseleave事件，尽管鼠标光标还在桌子里面。 Chrome或Edge中没有此类问题。

以下是我的代码，其中包含示例数据：

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

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

Answer 1

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

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

Fiddle here.

Answer 2

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

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

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

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

2 个答案: