【移动端H5】click事件和touch事件的区分

当我们在开发移动端的浏览器H5页面时，页面既会支持click事件，又会支持touch事件。

作为初学者来说，在开发触控事件的处理时，非常容易把这两个事件弄混或者不知道绑定在哪个事件上，从而导致触控混乱，出现很多bug！！！

这篇文章将对两者的不同点做一个简要的区分～

一、事件定义

🌟touch事件

touch事件是移动端区别于pc端触控的独有事件，也是实现很多手势的基础事件。

它具体包含了：touchstart（触摸开始时触发）、touchmove（触摸并产生移动时触发）、touchend（触摸结束时触发）等一系列事件。

🌟click事件

click事件pc端和移动端中的元素都有，但是在移动端的click事件，可以理解为仅在“点击”场景下触发，即触摸并释放后触发。所以，在移动端点击元素，不仅会触发click事件，还会触发touchstart和touchend。

而移动端根据touchstart到touchend的间隔时间，又会区分触发 click（单击）、dbclick（双击）事件。

通常来说，click事件里，touchstart和touchend事件大概间隔200-300ms。

二、触发时机

根据上面的定义，可以知道移动端click事件的触发其实也是基于touch事件来的。

touchstart首先被触发，然后根据间隔时间是否符合标准，再看是否触发click事件

因此，先触发touch事件、再触发click事件。

三、适用场景

🌟touch事件

适用于需要快速响应交互的滑动、需要根据功能定制的手势触控

尤其注意移动端很多默认的手势比如页面滑动、应用的滑进滑出、缩放，都是基于touch事件来的，因此需要根据需要决定是否在事件回调函数里使用e.preventDefault()。如果使用了，则可能会导致默认手势事件失效（比如页面不可滑动了【非常坑，因为移动端的滑动基本使用touch触发的scroll，就好比touch触发的click事件一样】）

🌟click事件

适用于按钮点击、表单提交等直接需要点击功能、且无复杂交互响应的情况。非常便捷、直接