移动端（H5）的点击事件、滑动事件和长按事件

问题描述

接上篇文章的项目。项目中有一部分是单选题答题环节，每道题的选项有文字、图片或者图文结合的形式呈现，所以导致每道题的长度不一样，需要做触屏的点击、滑动和长按判断。没做判断之前滑动和点击事件是不能区分开的，每次想滑动时都会触发点击，从而引发非意愿选择。

问题分析

我们熟知的点击事件click会有300毫秒的延迟（有相关插件可以解决这个问题，有兴趣的小伙伴可以自己上网康康）。还有一种就是touch事件，touch事件包含了touchstart（手指触摸到屏幕时触发）、touchmove（手指在屏幕上移动时触发）、touchend（手指离开屏幕时触发）、touchcancel（拖动中断时触发） 这四个事件。
当点击屏幕时，会依次触发：
touchstart->touchmove->touchend 或者touchstart->touchend->click。
大概了解了click的300毫秒延迟现象后，我采用了touch事件，为了避免滑动页面时触发点击，我对点击、滑动和长按做了区分。

问题解决

嘻嘻，为了避免文字的苍白，直接上代码（图片）：


现在点击和滑动混乱的问题就解决。
另外，做个说明：
因为touch的几个事件执行的先后顺序（上文已经说明），这里我把长按事件放在了touchstart中，所以会导致执行touchend时，也会执行touchstart事件。其实实现执行了touchstart，然后才执行了touchend。如果不需要长按事件，可以把它去掉。
还有一篇文章分析的不错，分享给大家。https://www.jianshu.com/p/b950ef9b5056