移动端touch、click、tap的区别
一、click 与tap比较
click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件。singleTap 和 doubleTap分别代表单击和双击。
二、使用tap会出现点透事件(事件穿透)
很多用过Zepto(移动端开发的库)都说使用tap会出现点透事件。
1、什么是tap事件穿透
执行完上层绑定的tap事件后,下层如果绑定着click事件或者本身就存在点击事件(a/input)也会默认触发,这就是点透事件,
2、出现点透事件的原因
首先要知道tap事件是通过监听绑定document上的touch事件来模拟的,并且tap 事件是冒泡到document上才出发的;
touchstart:在这个dom上用手触摸就能开始
click:在这个dom上用手触摸,且手指未曾移动,且在这个dom上手指离开屏幕,且触摸和离开时间很短(有的浏览器可能不检测时间间隔,照样可以出发click),才开始触发。
也就是说在移动端的事件触发从早到晚排序:touchstart touchstop click。所以click的触发是有延时的,大约300ms,所以click触发的原则是,触发当前有click的元素,且该元素面朝用户的最前端,才会触发click。
3、解决办法
(1)github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick
在dom ready时初始化在body上,如:
$(function(){
newFastClick(document.body);
})
然后给需要“无延迟点击”的元素绑定click事件即可。实战开发中,click响应速度比tap还要快一点。
(2)为元素绑定touchend事件,并在内部加上e.preventDefault();
$A.on('touchend',function(e){//而touchend是原生的事件,在dom本身上就会被捕获触发 $demo.hide()
e.preventDefault(); })
监听touchend事件,阻止A元素的touchend的默认行为,从而阻止click事件的产生.
三、touch事件
主要有
touchstart事件:当手机触摸屏幕时触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上华东法人时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的触发。关于这个实际的确切触发时间。
每个触摸事件都包括了三个触摸列表:
1.touches:当前位于屏幕上的所有手指的一个列表。
2.targetTouches:位于当前DOM元素上的手指的一个列表。
3.changedTouches:涉及当前事件的手指的一个列表。
例如,在一个touchend事件中,这就会是移开的手指。
这些列表由包含了触摸信息的对象组成:
1.identifier:一个数值,唯一标识触摸会话(touchsession)中的当前手指。
2.target:DOM元素,是动作所针对的目标。
3.客户/页面/屏幕坐标:动作在屏幕上发生的位置。
4.半径坐标和rotationAngle:画出大约相当于手指形状的椭圆形。
---------------------------------------------------
移动端touch、click、tap的区别的更多相关文章
- 移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- 移动端web,tap与click事件
一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...
- 移动端前端常见的触摸相关事件touch、tap、swipe
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- 关于移动端的Click事件
在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...
- 移动端的click
移动端的click 移动端click和touch的关系 搬运 http://segmentfault.com/q/1010000000691822 手指在屏幕上滑动时 各个touch的触发顺序 tou ...
- 移动端touch点穿(穿透)解决办法
回答一 穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟或者事件冒泡导致. 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zep ...
- 移动端 touch
原文链接:http://caibaojian.com/mobile-touch-event.html 本文主要介绍 TouchEvent 相关的一些对象与属性如 Touch, TouchList, t ...
- 原生 JS 实现移动端 Touch 滑动反弹
什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
随机推荐
- [前端] AJAX
背景 Asynchronous JavaScript And XML:异步js和XML,可实现异步刷新 用途 验证提交的用户名是否已存在 不使用AJAX,需要提交数据后,刷新页面来验证 使用AJAX, ...
- Linux 部署 iSCSI 客户端配置(Linux)
Linux 部署 iSCSI 客户端配置(Linux) 客户端环境 Client :RHEL8 IP : 192.168.121.11 一.测试与服务端的连通性 [root@Client-linux ...
- python基础之字典、集合
一.字典(dictionary) 作用:存多个值,key-value存取,取值速度快 定义:key必须是不可变类型,value可以是任意类型 字典是一个无序的,可以修改的,元素呈键值对的形式,以逗号分 ...
- shell基础之多功能nginx(安装、重启、停止等)
1 #!/bin/bash 2 #要求:检查本机是否已编译安装nginx,检查本机是否存在nginx源码包,编译安装nginx,实现开启.停止.查看状态等功能 3 #检查是否已编译安装nginx 4 ...
- centos下yum方法安装apache+php+mysql
yum(全称为:Yellow dog Updater,Modified) 是一个在Fedora和RedHat以及SUSE中的Shell前端管理软件.基于RPM包管理,能够从远处镜像服务器下载RPM包并 ...
- mysql查看表的字段与含义
查看表的字段与含义 select column_name,column_comment from information_schema.`COLUMNS` where table_Schema='lo ...
- THINKPHP_(8)_修改TP源码,支持基于多层关联的任一字段进行排序
之前博文 前述博文THINKPHP_(1)_修改TP源码,支持对中文字符串按拼音进行排序,其解决的主要问题是,对于查询出的think\collection数据,按指定字段对数据进行排序,从而在页面上进 ...
- Tensor基本理论
Tensor基本理论 深度学习框架使用Tensor来表示数据,在神经网络中传递的数据均为Tensor. Tensor可以将其理解为多维数组,其可以具有任意多的维度,不同Tensor可以有不同的数据类型 ...
- 机器学习PAL基本概念
机器学习PAL基本概念 本文介绍PAI-Studio.PAI-DSW及PAI-EAS的基本概念. PAI-Studio PAI-DSW PAI-EAS
- NVIDIA DRIVE AGX开发工具包
NVIDIA DRIVE AGX开发工具包 英伟达drive AGX开发工具包提供了开发生产级自主车辆(AV)所需的硬件.软件和示例应用程序.NVIDIA DRIVE AGX系统建立在汽车产品级芯片上 ...