The attached file:

Deleted: pointerenterbug.html 757 bytes

pointerenterbug.html 757 bytes View Download

The problem is not limited to pointerenter and pointerleave, but pointerout looks broken as well.

And another problem with pointerleave/pointerout and touch:

Steps to reproduce
1. Open the attached html file in a chromium 55+, with a touch device (simulated is ok as well)
2. Open the devtools on console tab
3. Place your finger in the red rect (prints enter)
4. Move your finger ~1 millimeter inside the red rect, but do not leave it (prints leave, even though the finger didn't leave the rect)

What is the expected behaviour?
The console should not print "leave", because the finger never left the red rect.

What went wrong?
The console prints "leave", even though the finger didn't leave the red rect.

nzolghadr@ can you please investigate?

I presume this is because the adjusting capturing model the specification now follows that PEP hasn't implemented yet.

sateffen@ you likely need to call releaseCapture(...) on the pointer id.

sateffen@ there are a few problems with your sample.

First of all if you don't want the browser to consider the finger movements as any sort of gesture you need to make sure you add the touch-action attribute to the css property. For example "touch-action: none" would disable all gesture detections. Note that if you don't have this property browser may detect a scroll gesture (when you move your finger) and send a pointercancel and pointerleave as the result rightaway.

Now assuming you added this attribute we get to the other problem. As Dave mentioned there is an implicit capture for a touch pointerevents in place right now as per spec. To explain a little more, the capture APIs for the pointerevents cause this. So if an element has the capture if you move your finger around and particularly in and out of the elements no boundary events are fired. Basically for example for touch pointer events we setPointerCapture right after pointerdown and before js handler for pointerdown is called. You can observe this behavior by logging gotpointercapture and lostpointercapture events. To disable this functionality you need to have a pointerdown handler and call releasePointerCapture right at the beginning and you will get the same behavior as you wanted. Something like this:
https://jsbin.com/nezehuk/edit?html,output

I add Scott here in case he wants to add anything regarding jQuery polyfill.

Ok, now I actually get, what's the problem.

I forgot the touch-action, you totally got me there. You're right, without touch-action:none the browser can't determine, whether the user wants to use a gesture or not. Thank you for the hint.

The implicit capture was unexpected. However, now I know about that and I understand it. Thank you for your detailed explanation, that helped me a lot.