CODEWITHSUNDEEP
javascriptgoogle-chromesafaridom-events
Zevan
Zevan

Reputation: 10235

MouseOver MouseOut issue in Safari/Chrome

This is a strange one, I'm shocked I've never noticed it before. It works like this, if your mouse is still and a div programmatically moves underneath your mouse, a mouseover event will not be triggered in Chrome/Safari - same goes for mouseout. Of course, if you move your mouse slightly once the div has moved underneath your mouse it will work as expected.

I created a demo on jsFiddle. Just let the div oscillate under your mouse, works fine in Firefox, not in Chrome or Safari - have yet to test in IE.

I'm leaning toward this solution... basically rolling my own mouseenter and mouseleave events using this:

if (mouseX > divLeft && mouseX < divRight &&
    mouseY > divTop && mouseY < divBottom){
    // mouse is inside div
}

I say mouseenter and leave because this method would have no bubbling

I was wondering if anyone else had thoughts about this... I have a feeling there is an easy way around it, but so far google hasn't turned anything up.

Upvotes: 11

Views: 6495

Answers (2)

Abraham Simpson
Abraham Simpson

Reputation: 350

This seems to continue happening on Safari. The workaround I went for is using css . Even if the mouseover won't be triggered, the :hover or :not(:hover) css pseudo elements work. So, in case that what you want to do on hover is aplicable through css, like hiding/showing an element, this is a posible solution.

Upvotes: 1

sankargorthi
sankargorthi

Reputation: 369

https://bugs.webkit.org/show_bug.cgi?id=4117

You might find this bug interesting.

Upvotes: 3

Related Questions