pointerenter and pointerleave work different with their mouse equivalents

[narqo]

In some edge cases polyfilled pointerenter and pointerleave events work in a different way comparing to native mouseenter and mouseleave events.

In the example http://narqo.github.io/test-pointerevents/test.html *enter and *leave handlers are bound to the top "root" element with .test-pointer css class. Even if such events should not bubble, mouseenter event fires if user moves the cursor to the coloured area. At the same time pointerenter event fires only if cursor is moved directly from body to the "root" element (see messages from console.log).

I haven't tested it with native pointerevents in IE 10+, but this behaviour is the same in desktop versions of Chrome and Firefox.

[patrickhlauke]

I haven't tested it with native pointerevents in IE 10+

Just checked in Win8.1/IE11, and native pointerenter/pointerleave fire in the same way as native mouseenter/mouseleave ... so yes, it seems a bug in PEP

[b-strauss]

Is this being worked on? My code fires too much events because of this.

[dmethvin]

I've refined the example a bit to show more about what's happening:
http://jsbin.com/dolojedari/edit?html,console,output

I think this can be summarized as pointerenter only fires on the innermost element. That event isn't supposed to bubble but if it enters another (ancestor) element as a result then that element should also get a pointerenter. This is complicated by the use of mouseover in PEP since mouseenter isn't supported as widely and has bugs on a few implementations.

@b-strauss I'm not sure that whatever you're experiencing is related to this, since the fix would involve firing more events and you are saying you already have more than you want. To keep things straight perhaps you could create a separate issue with a test case? We can always close it as a dup if it turns out to be the same issue.

[b-strauss]

@dmethvin During my little test at home everything worked fine. I will see if I can reproduce the issue when I'm back at work next year.

[b-strauss]

I just rechecked my issue and it is indeed the issue described here. I have a "pointerenter" event on my element, the pointer enters the element through a child and the event is not fired on the "root" element that has been registered with the listener. I think this can only be implemented properly with mouseenter.

[b-strauss]

@dmethvin What speaks against using mouseenter/leave to polyfill this? As far as i know it's only buggy on some really old browsers (FF7, Chrome 14, etc.).

[dmethvin]

@b-strauss Safari 7 has a bug as well but if that's not in the support matrix then a shim based on mouseenter should be fine.

[iamvdo]

Hey guys.
I'm not sure if I ran across the same problem, but I've quickly made a reduced testcase for a "pointerleave different than mouseleave problem".
See gif:

And JSBin: http://jsbin.com/jayahegova/edit?js,console,output

Hope this will help

[MilllerTime]

Thanks for the fix here! Just ran into this issue with the hosted version (0.4.1) before digging around and realizing a fix was in place. I ran a local build of PEP and it works as expected. However, seeing that a few months have passed since the fix was implemented and unit tests were improved/passed, when can we expect to see an official release containing this code? No doubt others may hit the same bump I did.

[scottgonzalez]

I'll schedule a release for September.