Firefox triggers multiple Mouseenter events after moving a node within the DOM

Question

Firefox triggers multiple Mouseenter events after moving a node within the DOM

I am facing an issue with the mouseenter/mouseleave functions in Firefox. I need to perform the following steps:

Move the node to a different location in the DOM after it registers a mouse enter event
Return the node to its original position after it registers a mouse leave event

The problem arises when the node is inserted into a different place, as mouseenter fires multiple times and mouseleave doesn't fire at all.

Here's a link to a pen that demonstrates this behavior. Check the console output to see how many times the mouseenter event is triggered. While it may seem confusing in the pen example, it's causing issues in my application. I have implemented zoom functionality for images on hover, but one of the ancestors has overflow: hidden which hides parts of the enlarged image. To address this, I move the image within the DOM structure while ensuring it remains in the same screen position, then return it back once the zoom effect is over (when mouse leaves the image).

Question:

Could someone shed light on what is happening here? And provide guidance on resolving this to achieve the expected behavior of mouseenter and mouseleave events being triggered only once?

javascript firefox dom mouseevent

Answer 1

Answer №1

I'm encountering a similar issue while utilizing D3 with a force-directed graph.

Every node is equipped with a `mouseenter` event handler that triggers `this.parentNode.appendChild()` in order to bring the element to the forefront. This method seems to be the most effective for rearranging SVG elements.

Although this approach works seamlessly on Chrome and Safari, it leads to a recurring `mouseenter` behavior in Firefox. Additionally, the `mouseleave` event fails to trigger at all.

As of now, my best workaround is to only execute `appendChild()` when the node is not already at the top (node.nextSibling !== null)

Answer 2

I'm encountering a similar issue while utilizing D3 with a force-directed graph.

Every node is equipped with a `mouseenter` event handler that triggers `this.parentNode.appendChild()` in order to bring the element to the forefront. This method seems to be the most effective for rearranging SVG elements.

Although this approach works seamlessly on Chrome and Safari, it leads to a recurring `mouseenter` behavior in Firefox. Additionally, the `mouseleave` event fails to trigger at all.

As of now, my best workaround is to only execute `appendChild()` when the node is not already at the top (node.nextSibling !== null)

Answer 3

Answer №2

Initially, your variables outer1 and outer2 are the same.

Furthermore, when you alter the node element, it will automatically trigger the mouseleave event because the cursor is no longer hovering over the element..

It seems like this is what you're aiming for:

var inner1 = document.getElementById("inner1");
var inner2 = document.getElementById("inner2");
var outer1 = document.getElementById("outer1");
var outer2 = document.getElementById("outer2");
var moved = false;

inner2.addEventListener("mouseenter", function(e) {
  if (moved) {
    zoomOut();
  } else {
    zoom();
  }
});

function zoom() {
  console.log("mouseenter");
  outer2.appendChild(inner1);
  moved = true;
}

function zoomOut() {
  console.log("mouseenter 2");
  outer1.appendChild(inner1);
  moved = false;
}

#outer1,
#outer2 {
  width: 300px;
  height: 200px;
}
#outer1 {
  background-color: green;
}
#outer2 {
  position: absolute;
  background-color: blue;
}
#inner2 {
  position: absolute;
  height: 70px;
  width: 100px;
  background-color: yellow;
}

<div id="outer1">
  <div id="inner1">
    <div id="inner2">Hover me</div>
  </div>
</div>
<div id="outer2">
</div>

Notice that I specifically handle the mouseenter event only since the mouseleave event will always be triggered after appending the element. I introduced a flag: moved to keep track of the div's location.

Answer 4

Initially, your variables outer1 and outer2 are the same.

Furthermore, when you alter the node element, it will automatically trigger the mouseleave event because the cursor is no longer hovering over the element..

It seems like this is what you're aiming for:

var inner1 = document.getElementById("inner1");
var inner2 = document.getElementById("inner2");
var outer1 = document.getElementById("outer1");
var outer2 = document.getElementById("outer2");
var moved = false;

inner2.addEventListener("mouseenter", function(e) {
  if (moved) {
    zoomOut();
  } else {
    zoom();
  }
});

function zoom() {
  console.log("mouseenter");
  outer2.appendChild(inner1);
  moved = true;
}

function zoomOut() {
  console.log("mouseenter 2");
  outer1.appendChild(inner1);
  moved = false;
}

#outer1,
#outer2 {
  width: 300px;
  height: 200px;
}
#outer1 {
  background-color: green;
}
#outer2 {
  position: absolute;
  background-color: blue;
}
#inner2 {
  position: absolute;
  height: 70px;
  width: 100px;
  background-color: yellow;
}

<div id="outer1">
  <div id="inner1">
    <div id="inner2">Hover me</div>
  </div>
</div>
<div id="outer2">
</div>

Notice that I specifically handle the mouseenter event only since the mouseleave event will always be triggered after appending the element. I introduced a flag: moved to keep track of the div's location.

Firefox triggers multiple Mouseenter events after moving a node within the DOM

Answer №1

Answer №2

Similar questions

What could be causing the linter in vue js to not properly lint the template?

What is the equivalent of window.onload in emscripten?

AJAX Showdown: Comparing jQuery's AJAX API to JavaScript's XHR

Using ternary operators and filters in a binding with AngularJS

Tips for dodging drawn-out sequences of periods

Error encountered when attempting to include a foreign key

Retrieve a document utilizing XHR on iOS Safari platform

(RESPOND) Configuring a preset option for a Dropdown selection field

Mastering the art of transitioning between DIV elements

Submit a HTML form to a Telegram recipient

React function does not provide a return value

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

Unable to locate or modify an item within an array

The Collada model in Three.js appeared completely dark until a mouse movement brought in some light

Opening the dropdown menu in IE8's HTML select requires a double-click

Adjusting the <input> value in real-time based on the fluctuating integer value

Putting Text Inside a Video Player in HTML

Generate a new entry by analyzing components from a separate array in a single line

The image retrieved from Blob Data does not meet the specifications of a valid PNG file for download

Elegant bespoke input box