原生js 有没有 手机移动端 滑动 的事件

JavaScript09

原生js 有没有 手机移动端 滑动 的事件,第1张

手机移动端滑动事件当然是有的

touchmove即为滑动事件

还有其他触摸事件,都给列一下:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。

一、原理及实现方法如下:

1、当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;

2、当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

二、注意:

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。

1.禁止缩放 

通过meta元标签来设置。

2.禁止滚动 

preventDefault是阻止默认行为,touch事件的默认行为就是滚动。 

event.preventDefault()。