Mouseenter / mouseleave events are not triggered for SVG elements using jQuery.on

Question

Look at jsFiddle

mouseenter / mouseleave doesn't seem to work when using jQuery in conjunction with SVG (Raphael 2.0). I know out of the box SVG jQuery is not 100% compatible with SVG, however, as far as I can see, this seems to affect IE9.

It is strange if you quickly move the mouse to / from the svg element (making sure that you immediately fall into the HTML area), and events trigger on it (but not every time). Just to make sure this is not a common problem with on , I hooked up a click event that works fine every time.

Just wondering if anyone knows if this is a bug or even a known issue?

Answer 1

This is a bug in 1.7.2. See ticket .

The problem disappears if I use jQuery (edge), so it should be fixed in the next planned version (1.8).

Answer 2

I think it is important to note that with jQuery 1.8.2 and android, jq-mobile is not used through the handset. I see touch and mouse events, randomly selected and not synchronized ... which means a thin mouseEnter differential trigger and press compared to another press of the touchStart button (sometimes, if it wasn’t even entered now, mouseEnter is called), then 2 touchEnds. If you had a touchEvent mouseEnter trigger, the second touch pattern (start, end, end) sends mouseLeave (if you do not arbitrarily use a combination of subtle presses to trigger a combination of clicks).

My expectation was that they should be triggered together in both situations, except that one (touch events) is more used for multiTouch needs or recognizes that there will not be a mouseLeave event after a click event modeled through the touch interface (somehow ? ...). My other expectation would be if I didn’t process or have a registered listener for mouse events, but I do for touch events, and vice versa, different events will or will not be dispatched depending on what was listened to or intercepted (return false or stop bubbling through preventDefault, etc.).

In any case, it seems to me that you need to handle both types of events in random, unrelated, unpredictable ways, which for me means giving up what is best described in the world of mice as “more” events on touch-screen devices.

Basically, I think that a touch should not send an over / enter event, while a click should also touch a touch, and if I listen to a preventDefault touch, cancel the specified mouseEvents.

In any case, it makes sense to send both and let me figure it out. The confusion I suspect is that you are only listening to half the events that it sends (lack of touch). ... good luck! can these thoughts help someone cope with the mess either at a higher level or at a lower level of dev commands. (Is this level the browser to blame?)