前端的很多事件在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. 判断是手机端还是PC短访问

    第一种:判断是手机访问还是PC访问 <script> function browserRedirect() { var sUserAgent = navigator.userAgent.t ...

  2. 《Ansible自动化运维：技术与最佳实践》第三章读书笔记

    Ansible 组件介绍 本章主要通过对 Ansible 经常使用的组件进行讲解,使对 Ansible 有一个更全面的了解,主要包含以下内容: Ansible Inventory Ansible Ad ...

  3. 主动降噪技术（ANC）的前生今世--概念历史

    一 概念 假如使用一句通俗的语言来概述ANC的原理的话,那就是:通过发出与噪声相位相反,频率.振幅相同的声波与噪声干涉实现相位抵消. 使用比较正式的语言来解释就是:动降噪通过降噪系统产生与外界噪音相等 ...

  4. SpringCloud之Turbine

    [前面的话]书接上文,本文的某些知识依赖我的上一篇SpringCLoud的文章:SpringCloud之Feign,如果没有看过可以先移步去看一下.前文提到了hystrix的应用,以及hystrix的 ...

  5. Servlet防止盗链

    在开发过程中有时存在用户直接复制链接,而绕过首页的情况.如果需要用户访问首页,而不是直接访问我们的网页,我们就称为盗链. 在Servlet中通过Request的getHeader()方法获取链接来源, ...

  6. Java入门系列之hashCode和equals（十二）

    前言 前面两节内容我们详细讲解了Hashtable算法和源码分析,针对散列函数始终逃脱不掉hashCode的计算,本节我们将详细分析hashCode和equals,同时您将会看到本节内容是从<E ...

  7. 针对媒体不实报道误导大众--抹黑C#工资垫底

    最近注意到一些媒体故意抹黑C# 工资垫底,参见 https://www.toutiao.com/i6741889572931633668/: 通过搜索引擎搜索<编程语言薪酬排行:Python薪资 ...

  8. Nginx安装教程，ubuntu18.04

    本文介绍Nginx如何安装,操作系统为Ubuntu 18.04.   一.安装 (1)安装git 执行命令:“sudo apt-get install git”. (2)安装aptitude 执行命令 ...

  9. java实现图片验证码

    一.验证码生成类 package hbi.tech.utils; import javax.imageio.ImageIO; import java.awt.*; import java.awt.im ...

  10. 如何编写高质量的 JS 函数（3） --函数式编程[理论篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EWSqZuujHIRyx8Eb2SSidQ作者:杨昆 [编写高质量函数系列]中, <如何 ...