The page is working correctly and the guidance is correct. Perhaps you are misunderstanding the guidance.

A pointercancel is issued once the browser takes over the event stream and starts doing its user agent actions like scroll and zoom.

What you are seeing is the drag down causes the scroll which then the browser starts scrolling and then issues a pointercancel. Likewise you will see touchmove events become uncancelable after that.

Thank you for answering my question.
I also listent the scroll event on window.
When I pointed my finger down an move it to the top side ,it will starts scrolling,then issues a pointercancel event is right.
But I move to the opposide direction,it won't starts scrolling because it is on the top now.
We can also set the height of the div to 200px,then the browser won't starts scrolling in any direction.

Deleted: pointer-demo.html 1.0 KB

pointer-demo.html 1.0 KB View Download

The pointercancel is generated when the user agent decides to scroll even if the scrolling has no effect (as you moving in the top direction) it is still generated.

ie;
The sequence is that the user agent decides the user is doing a scrolling gesture so it will generate a scroll event and issue a pointer cancel. The fact that the scroll gesture didn't have any effect doesn't cause the pointercancel not to be issued.

Understand?

OK,I got it.

According to `https://developers.google.com/web/updates/2016/10/pointer-events`,
pointer events is made for unifing the event models such as mouse,pen,touch.

Under the pointer event model,mobile platform,when user put their finger on the screen and start moving,the browser just issue one pointercancel event and one pointermove event.

How should we use it on the mobile platform for making a drag plugin(drag any items the user pointed at to the other place on the page),a iScroll like plugin(custom scroll,in iOS and Android,scroll event won't issue immediately when the browser starts scrolling)?

In the old time we can use the touchstart,touchmove,touchend events.

Should the pointer event model fully taking the place of the touch event model?

You can use "touch-action: none" which would prevent the default user action for the custom scroll. Although I'm not sure why you would want to cause main thread scrolling because threaded scrolling is much more responsive to the user.

A draggable plugin you want a touch-action none and probably use pointer capture. For example see: https://patrickhlauke.github.io/touch/tests/pointercapture.html

Thanks ^_^

I have a list with thousands of items and fast word index(a-z) on the page,just like the contact list in our phone.

In the App WebView,the performance is much lower than original browser, and it causes the problem like app crash(Memory), low FPS(script, rendering, Memory), screen flashing (set scrollTop to jump from word 'a' to 'd'). 

I have to find a way to enhance performance such as reducing number of DOM elements by modifing the list items while the view is scrolling.

In fact, the scroll event won't fire until the browser stop scrolling.So I use touch event to simulate it,just like iScroll-infinite (http://lab.cubiq.org/iscroll5/demos/infinite/).

In that demo,they use : "document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false)", to prevent scrolling.

Although there are many ways to prevent the pointercancel event,I still having a doute that developers must write extra code to let pointer event can replace touch event or mouse event.

Is there any way I can figure out why the browser issues a pointercancel event even if the scrolling has no effect? I can't find any clew in "https://w3c.github.io/pointerevents/#the-pointercancel-event".

Thanks for your time again ^_^