javascript - Select triggers MouseLeave event on parent element in Mozilla Firefox - Stack Overflow

admin管理员组

文章数量:1312811

I have the following problem: In Mozilla Firefox, whenever I hover a dropdown inside a table, it triggers the mouseleave event of the table, though the mouse cursor is still inside the table. There is no such problem in Chrome or Edge.

Here is my code with an example data:

DEMO

I have a table and the last row appears when the mouse cursor enters the table. When the mouse leaves - the row hides. The row should hide only if i leave the table

Is there some way or a workaround to prevent the unnecessary mouseleave event to occur?

I have the following problem: In Mozilla Firefox, whenever I hover a dropdown inside a table, it triggers the mouseleave event of the table, though the mouse cursor is still inside the table. There is no such problem in Chrome or Edge.

Here is my code with an example data:

DEMO

I have a table and the last row appears when the mouse cursor enters the table. When the mouse leaves - the row hides. The row should hide only if i leave the table

Is there some way or a workaround to prevent the unnecessary mouseleave event to occur?

• javascript
• jquery
• firefox
• events
• mouseleave

Share Improve this question Follow asked Oct 19, 2017 at 13:37 zstefanovazstefanova 1,83122 gold badges2828 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I had the same issue in VueJS and I fixed it like this. First make sure the event object is passed to your method, so use @mouseleave="myEvent" instead of @mouseleave="myEvent()".

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

So checking the event.target.nodeName didn't work for me, I had to use event.relatedTarget.

You can test for select on mouseleave like this:

$('.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.

本文标签： javascriptSelect triggers MouseLeave event on parent element in Mozilla FirefoxStack Overflow