Javascript mouseenter event fired twice

Question

.on("mouseenter") and .on("mouseleave") , when console.log the event, in both cases the event.type is "mouseover"

Is that normal ? I though that for mouseenter you see event.type "mouseenter"

My problem is that javascript mouseenter event fired twice when hovering over the element.

I can see that the event.fromElement is different in both fired events.

How do I stop the bubbling ? event.stopProppagation , doesn't work

<span class="foo-wrapper">
    <i class="icon-circle"></i>
</span>

 $(".foo-wrapper .icon-circle").on("mouseenter", function(e){ 
   e.stopPropagation();
   cur_target = $(e.target);
   $("#tooltip").css({'top': parseInt(cur_target.offset().top-116), 'left': parseInt(cur_target.offset().left-141)}).fadeIn(150);
 }

When the mouse enter the .icon-circle, it fires twice.

Answer 1

mouseenter is not a native dom event. Its wrapping mouseover. Let me explain: Say you have element P, which is 100x100, and that has a child element C which is 50x50.

When you first hover over P, you get both mouseover and mouseenter. When you now hover over C, the browser fires mouseout for P and mouseover for C. But C is inside P, so you didn't 'leave' P yet- which is why mouseenter and mouseleave were made.

The library implementing the events checks the targets of the over and out events in order to determine whether to fire enter or leave.

So if its firing twice, its probably from different elements. You need to add the handler to the correct element and not to both.

You can also call event.preventDefault() and/or return false from the event handler.

Answer 2

In jQuery v2.1.0 it seems to work properly. Here is an example with your code http://jqversion.com/#!/jad2sKb . It seems that the mouseenter event is fired just once, and the event.type is mouseenter

If there is anything different please update the demo.