移动端学习之点击事件触摸事件

最新推荐文章于 2025-03-17 22:08:01 发布

mister_snail

最新推荐文章于 2025-03-17 22:08:01 发布

阅读量732

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/Mister_SNAIL/article/details/107856841

版权

移动端专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了移动端的点击(click)、触摸(touch)、tap、swipe等事件的触发机制及顺序，对比click与tap事件的区别，探讨了200~300ms的延迟问题及其解决方案，同时介绍了规避点透事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关事件

1.click 点击事件

单击事件，类似于 PC 端的 click，但在移动端中，连续 click 的触发有 200ms ~ 300ms 的延迟。

300 毫秒延迟带来一个巨大的问题，即点透事件（点击会触发非当前层的点击事件），规避方法参考此链接。

fastclick.js

2.touch 触摸事件

// 手指触摸到屏幕会触发
touchstart

// 当手指在屏幕上移动时，会触发
touchmove

// 当手指离开屏幕时，会触发
touchend

// 当你的手指还没有离开屏幕时，有系统级的操作发生时就会触发touchcancel，例如alert和confirm弹框，又或者是android系统的功能弹窗
touchcancel

// 这4个事件的触发顺序为：
touchstart -> touchmove -> …… -> touchmove -> touchend

3.tap 事件

// 手指碰一下屏幕会触发
tap

// 手指长按屏幕会触发
longTap

// 手指碰一下屏幕会触发
singleTap

// 手指双击屏幕会触发
doubleTap

4.swipe 事件(滑动事件)

// 手指在屏幕上滑动时会触发
swipe

// 手指在屏幕上向左滑动时会触发
swipeLeft

// 手指在屏幕上向右滑动时会触发
swipeRight

// 手指在屏幕上向上滑动时会触发
swipeUp

// 手指在屏幕上向下滑动时会触发
swipeDown

其他相关

1.click 和 tap 比较

两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。(延迟原因参考此链接)

2.查看触发的事件对象

原生脚本监听、第三方插件监听（zepto.js）。