调整窗口大小时，Chrome中触发了Mouseenter事件

Question

Very strange behaviour in Google Chrome !

I've got a grid of div , and on each of then, I add an eventListenner for mouseenter event. In my demo code, when the event is triggered the div get opacity:0.2 .

$(".target_div_class").on("mouseenter",  [my action ...])

Well, it's work's on every browser except in Google Chrome.

To reproduce the strange behaviour in chrome, go to my codepen demo page place the mouse pointer in front of the grid and start to resize the main browser windows quickly, you will see that some of the divs get opacity changed even if there is not mouse roll-over !

what I'm doing wrong, is an special jquery event that Chrome doesn't like ?

thank's

larry

edit -1-

I think I understand why some div receive the event.

It seem's that, when I click on a border (left or right) of the browser, Chrome keep a trace of the mouse position X and Y.

Then when slowly expand the browser width, any div that under this "start mouse position" receive the event. It is really simple to reproduce when first the browser width is thin, and then slowly expand it, if I take a pen and place it at the mouse start position before resize, It's clear. very very strange.

edit -2-

This behaviour is only on a OS windows 8 , I've just test it on a Mac , and there is not problems !

Well, I've been testing this behaviour on a couple of sites, like this one : https://devart.withgoogle.com/

made by Google professional I suppose, and the strange behaviour occurs again, I'll try to find how to contact Google Chrome team ...

Answer 1

I do not believe that mouseenter/mouseleave is fully supported by chrome. Chrome only simulates those functions, unlike in IE.

But, the problem only occurs when someone tries to re-size the window faster than the browser's edge actually moves and the mouse goes into the page momentarily. So, its not that unreasonable a behavior. You could always try to fix it with a

$(window).resize(function() {
    //some code to reset opacity
});

Answer 2

See if this helps

$(".target_div_class").on("mouseenter", function(){
 event.stopPropagation();
   //your code
});