Unnecessary preventDefault() on touchend events?

[idiotWu]

Hi there! I am the author of smooth scrollbar, and I just received this bug report from a user of splide: idiotWu/smooth-scrollbar#435

This is a sandbox that reproduces the issue: https://codesandbox.io/s/splide-forked-dzxcn. You can move the slider horizontally first, and then trigger a scroll in the below or above area to see the weird behavior.

Kapture.2022-01-22.at.08.07.08.mp4

After some debugging, I found that you are calling event.preventDefault() on touchend events and therefore break the smooth scrollbar. As per our current design, we calculate the touch moving speed by the following steps:

1. touchstart: create a list of trackers for the pointers inevent.touches and track them using touch.identifier
2. touchmove: calculate and update the moving velocity of each corresponding tracker
3. touchend: release the corresponding tracker and return the final velocity

However, as we ignore the default-prevented events, calling event.preventDefault() on touchend will prevent the tracker from being released and resulting in the bug. So my question is: is it necessary to call event.preventDefault() on touchend events?

P.S. it seems you didn't call touchEndEvent.preventDefault() in splide@2

[idiotWu]

By the way, I think you can use TouchEvent.changedTouches to get the pointer's position on touchend if necessary 😆

splide/src/js/components/Drag/Drag.ts

Lines 185 to 192 in 815030f

	/**
	* Called when the user releases pointing devices.
	* Be aware that the TouchEvent object provided by the `touchend` does not contain `Touch` objects,
	* which means the last touch position is not available.
	*
	* @param e - A TouchEvent or MouseEvent object
	*/
	function onPointerUp( e: TouchEvent | MouseEvent ): void {

[NaotoshiFujita]

Hi idiotWu,

I think yes. I also wondered if it was necessary, but I decided to add it because:

1. The W3C spec says it has the default action (https://www.w3.org/TR/touch-events/#h3_list-of-touchevent-types)
2. The event is cancelable, and the user agent may have arbitrary default action. AFAIK, most user agents do not have any actions that should be prevented in my case, but I've not checked all browsers and versions, such as opera mini, and I should be careful because handling drag/swipe is kind of .....sensitive.
3. The MDN instruction of Touch Events calls preventDefault() for touchend in the example (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#handling_the_end_of_a_touch).

Thanks for the info about changedTouches. I'll check it out 👍

[idiotWu]

Thanks for your clarification!

AFAIK, touchendEvent.preventDefault() is basically used to suppress taps/clicks:

To suppress the default behavior of a tap (such as the generation of a click event), call preventDefault() inside of a touchend listener.
Source: https://developers.google.com/web/updates/2017/01/scrolling-intervention

It doesn't seem necessary to eliminate tap/click behaviors in your case, so I think calling preventDefault() is a little bit superfluous?

FYI: as a JavaScript-based scrolling library, we only call preventDefault() on touchmove events and ... so far so good?

[idiotWu]

...and from the same MDN source:

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#handling_clicks

[NaotoshiFujita]

Then why do they call preventDefault on all touch events: touchstart, touchmove and touchend in their example?
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#example

[idiotWu]

Maybe they wanted to prevent taps/clicks? The article is somehow self-contradicted 🤔

[idiotWu]

IMO, preventDefault() has these effects on touch events:

• touchstart, touchend: eliminate corresponding mouse events, e.g. click, mouseup ...
• touchmove: prevent scrolling

Mouse events will be automatically canceled if the pointer has moved.

[NaotoshiFujita]

This google guidance also calls preventDefault() for all touch events (handleGestureStart, handleGestureMove and handleGestureEnd):
https://developers.google.com/web/fundamentals/design-and-ux/input/touch?hl=en

I guess the purpose is... "just in case", since the user agent can freely determine whether to implement the default action or not.

Unfortunately it can break your library, but I have to keep my preventDefault().

[idiotWu]

Yeah, I understand. Anyway, I think I should clean up the trackers on touchend regardless of whether it is default-prevented or not.