Why does the mouseenter event fire 2 times?

Question

JavaScript

Sandbox with a problem - jsfiddle.net/alexpts/4res6aey/9

1. Why doesn't the event fire 2 times in chrome, because we listen to the parent and the parent's geometry does not change. (I tend to think that it works correctly in chrome 1 time, and it is wrong in other browsers).
2. Why does the native event occur 1 time in chome, and the jquery event 2 times? (jquery is just a wrapper, but where else does 1 event come from)
3. How to deal with this?

Solution:
It's really about emulating the mouseenter event in most browsers and jQuery. This can be seen from jsfiddle.net/4res6aey/16 .
The jQuery implementation does not take into account normal browsers (respect to chrome) and does not use the native mousenter event, and also emulates visibly. Hence the difference in behavior between native and jquery events.

I wrote to the FF bug tracker, maybe they will take a good example with chrome - https://bugzilla.mozilla.org/show_bug.cgi?id=1130823

Answer 1

1. The event fires twice because when we hover over the block, the cursor is hovered over the photo, the inner .item block, and triggers the event. After that, the picture is immediately deleted, and it turns out that the cursor is already hovering over the block itself, and the browser seems to consider this as a new hover. Indeed, in fact, the target - the element on which the cursor is hovered - has changed. (I don’t have confirmation that it works exactly like this, but judging from the experiments, it does).
2. This event is native to Chrome quite recently, it came from IE and jquery simulates it for compatibility api.jquery.com/mouseenter/:

The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser.

Let's say a closer and simpler onmouseover event works the same way through jquery, which is native, and also produces 2 events, most likely according to the scheme that I described in the first paragraph.
3. There can be many solutions, depending on what the real task is. In the current example, it's better not to use jquery at all, but to do it through css and the :hover pseudo-class. If this is just a simplified example of a more complex task for which css is not suitable, then you need to look at the full situation then, most likely you will need to cheat. You can hang an event on what should disappear, though it's better not to delete it, but to disconnect .detach() or just hide .hide().

Answer 2

Most likely you have two different jQuery libraries connected.