移动端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:画出大约相当于手指形状的椭圆形。
---------------------------------------------------
最新文章
- 学习笔记——Maven实战(一)坐标规划
- call函数心得
- 分享4种CSS3效果(360度旋转、旋转放大、放大、移动)
- Using NuGet without committing packages to source control(在没有把包包提交到代码管理器的情况下使用NuGet进行还原 )
- 编译虚拟机jvm——openjdk的编译
- Win下Jenkins-2.138源码编译及填坑笔记
- java-方法重载、参数传递、
- appium如何解决每次都要安装apk的烦恼
- 2018-2019 ICPC, NEERC, Southern Subregional Contest (Online Mirror) Solution
- C# DataReader
- python+jenkins 构建节点环境编译器配置问题
- Beta版本冲刺(六)
- X.509 数字证书结构和实例
- Linux系统——MySQL基础(一)
- 各种IDE的使用
- 01-A-1: 计算
- 用函数指针将字符串 ”hello world“ 输出为 ";world hello”
- BAdi:BOM_UPDATE - Check update for BOM Save
- Android TabHost控件 右侧留空并增加按钮
- Codeforces 180C Letter:dp
热门文章
- 小米华为vivooppo手机记录隐私证据查询
- CentOS7启动SSH服务报:Job for ssh.service failed because the control process exited with error code
- Linux创建RAID1_实战
- Docker的镜像及容器常用操作(2)
- LTC4020
- Centos7.3 进入救援模式,解决虚拟机开机引导只能看到一个横杠
- Docker五分钟搭建Wordpress
- IAP 订阅后端踩坑总结之 Google 篇
- 混合前端seq2seq模型部署
- YOLOv4:目标检测(windows和Linux下Darknet 版本)实施