CODEWITHSUNDEEP
javascriptjqueryfirefoxeventsmouseleave
zstefanova
zstefanova

Reputation: 1831

Select triggers MouseLeave event on parent element in Mozilla Firefox

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?

Upvotes: 9

Views: 1807

Answers (2)

Kim
Kim

Reputation: 1898

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.

Upvotes: 9

delinear
delinear

Reputation: 2805

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.

Upvotes: 2

Related Questions