loryjs / lory

☀ Touch enabled minimalistic slider written in vanilla JavaScript.
http://loryjs.github.io/lory/
MIT License
2.28k stars 243 forks source link

Remove e.preventDefault() to solve conflict with passive event listeners #726

Closed laozhu closed 6 years ago

laozhu commented 6 years ago

When I use lory.js in Google Chrome 65 (mobile design mode), I got lots of errors in my console as below screenshot.

image

In the article Making touch scrolling fast by default, I found that we can't use preventDefault in a passive event listener, they will conflict.

If you call preventDefault() in the touchstart or first touchmove events then you will prevent scrolling. The problem is that most often listeners will not call preventDefault(), but the browser needs to wait for the event to finish to be sure of that. Developer-defined "passive event listeners" solve this. When you add a touch event with a {passive: true} object as the third parameter in your event handler then you are telling the browser that the touchstart listener will not call preventDefault() and the browser can safely perform the scroll without blocking on the listener.

I removed e.preventDefault(); line, there's no errors in my console now (mobile design mode).

meandmax commented 6 years ago

https://github.com/meandmax/lory/blob/master/src/lory.js#L466

I think that is already done, anyways thank you for contributing.