前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件

本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture手势事件（目前只是一个概念，使用的时候需封装模拟）

使用到的是移动端的Chrome浏览器，本文只对该浏览器进行调试，其他浏览器暂未考虑到

一、事件定义及分类

1. click事件

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

2. touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

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

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

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

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

3. tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

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

longTap: 手指长按屏幕会触发

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

doubleTap: 手指双击屏幕会触发

4. swipe类事件

滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

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

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

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

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

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

移动端前端常见的触摸相关事件touch、tap、swipe的更多相关文章

  1. 移动端前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

  2. 微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）

    touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 ...

  3. 背水一战 Windows 10 (68) - 控件（控件基类）: UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件

    [源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...

  4. 与众不同 windows phone (24) - Input（输入）之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦

    原文:与众不同 windows phone (24) - Input(输入)之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦 [索引页][源码下载] ...

  5. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  6. html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">     <meta ...

  7. vue2.0做移动端开发用到的相关插件和经验总结1.0

    最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSC ...

  8. 移动端WEB开发，click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  9. HTML5触摸事件演化tap事件

    触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...

随机推荐

  1. crypto 的使用方法和说明

    crypto 模块提供了加密功能,包含对 OpenSSL 的哈希.HMAC.加密.解密.签名.以及验证功能的一整套封装.我们这里讲crypto AES算法加密 一.使用步骤 1.引入Crypto 1. ...

  2. 解决commBind: Cannot bind socket FD 18 to [::1]: (99) Cannot assign requested address squid

    最近玩squid主要是为了爬虫代理,但是使用docker搭建squid的时候发现,docker一直默认使用的 ipv6,但是squid使用ipv4,导致无法绑定,出现commBind: Cannot ...

  3. jQuery的内容选择器

    JQuery中的内容选择器 JQuery中的内容选择器有四个: :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :has(selector) ...

  4. JAVASE知识点总结（二）

    第十三章:多态  一.instanceof 判断一个类是否是指定的类 真则返回true 假则返回false.  二.字段没有多态,只有方法有多态,字段前面是的什么类型,字段就调用谁的,在编译时就已经确 ...

  5. java -PDF添加文本水印与图片水印

    java pdf添加水印文本及图片文本 PDF文件添加文本水印: private static int interval = 30; public static void waterMark(Stri ...

  6. Mysql INSTR函数

    在Mysql中,可以使用INSTR(str,substr)函数,用于在一个字符串(str)中搜索指定的字符(substr),返回找到指定的字符的第一个位置(index),index是从1开始计算,如果 ...

  7. CentOS7 搭建php环境

    1,先安装apache: yum install httpd 配置ServerName,进入httpd.conf文件: vi /etc/httpd/conf/httpd.conf 将#ServerNa ...

  8. .net core 3.0 Signalr - 03 使用MessagePack压缩传输内容

    ## MessagePack基础介绍 Signalr默认使用的是json形式传递数据,但是signalr提供了灵活的扩展,支持MessagePack形式序列化数据,以增加性能降低网络传输的效果,极大的 ...

  9. redis实践 —— redisReply简析

    redisReply 定义如下: /* This is the reply object returned by redisCommand() */ typedef struct redisReply ...

  10. touch，stat

    touch(选项)(参数) 一是可以用来创建空文件,二是用来改变文件的元属性-a:修改文件的访问时间为当前时间-m:修改文件的改变时间为当前时间-r:把文件的属性修改成和某些文件一样的时间-t:修改成 ...