移动端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:画出大约相当于手指形状的椭圆形。

---------------------------------------------------

原文地址:https://www.cnblogs.com/luo1240465012/p/9450627.html

时间: 2024-09-29 18:48:42

移动端touch、click、tap的区别的相关文章

tap,touch,touchstart,事件与click事件的区别

根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动端触屏灵敏的效果. 所以这里如果使用手机浏览器访问你的st,或者jqm项目,就得使用js修改成click事件,以防止单击多次触发的问题 tap,touch,touchstart,事件与click事件的区别

移动端web,tap与click事件

一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件.所以触摸事件反应更快,体验更好.singleTap和doubleTap 分别代表单次点击和双次点击.tap封装了touchstart.touchmove.touchend三个事件的处理(touchstart之后如果有产生touchmove则取消此次tap事件的产生) click则只是

移动端触摸相关事件touch、tap、swipe

一.事件定义及分类 1. click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 300ms的延迟 2. touch类事件 触摸事件,有touchstart touchmove touchend touchcancel 四种之分 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了

关于移动端的Click事件

在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touchstart - > touchmove -> touchend -> mouseover ->mousemove ->click, 从这个执行顺序可以看出,走完这个过程,300毫秒到click响应不足为奇了. 既然如此,我们完全可以通过touchstart来取代click事件,

移动端touch点穿(穿透)解决办法

回答一 穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟或者事件冒泡导致. 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zepto的事件都绑在Document上). 解决方案 1.使用fastclick,这个可以非常完美的解决点穿问题. 2.在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none. 回答二 移动端的click都是touch之后,才会模拟触发.

web移动端touch事件

1.移动端与pc端的区别 移动端没有鼠标,自然也没有鼠标事件.所以onmousedown之类的事件监听在移动端时无效的. 移动端为了响应双击事件,onclick事件有300ms的延迟,因为要看看接下来的300ms有没有再次点击,有的话视为双击,没有的话视为单击. 延迟300ms只是理论上,实际上每台手机上这个延迟可能会不同,下面的代码可以测试当前手机上onclick事件的延迟 <script> var now document.ontouchstart = function(){ // 返回

移动端touch事件的使用

一.支持webkit的touch事件 pc上的web页面鼠标会产生 iphone.ipod  Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 1.touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 2.touchmove--当手指在屏幕上滑动时连续触发.通常我们再滑屏页面,会调用event的preventDefault()可以阻

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

移动端touch触屏滑动事件、滑动触屏事件监听!

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小