tap 和click 事件区别

简介: clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto:最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小。介绍下tap和click的区别:两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,singleTap和doubleTap分别作为单次点击和双击,但是使用tap会带来点透事件(事件穿透)。

clike事件和 Zepto.js 中tap的区别

 首先介绍下Zepto:

最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小。

介绍下tap和click的区别:

两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,singleTap和doubleTap分别作为单次点击和双击,但是使用tap会带来点透事件(事件穿透)。

介绍下什么是tap事件穿透:

执行完上层绑定的tap事件后,下层如果绑定这click事件或者本身就存在点击事件(a/input)也会默认触发,这就是tap点透事件

下面正规解释下tap点透事件发生的场景:

当A/B两个层上下Z轴叠层,上层的A点击后消失或者移开(原因接下来会讲),当B元素本身默认有click事件或者绑定click事件,这种情况下,点击A/B重叠的部分,就会出现点透事件

点透现象出现的原因:

首先要知道tap事件是通过监听绑定document上的touch事件来模拟的,并且tap事件是冒泡到document上才触发的;

touchstart:在这个dom上用手触摸就能开始

 

 

click:在这个dom上用手触摸,且手指未曾移动,且在这个dom上手指离开屏幕,且触摸和离开时间很短(有的浏览器可能不检测时间间隔,照样可以触发click),才开始触发。

也就是说在移动端的事件触发从早到晚排序:touchstart  touchstop click 。 所以click的触发是有延时的,about 300ms

由于我们在touchstart阶段就已经隐藏了A,当click被触发时,能够被点击的就是B;

介绍下click事件的触发规则:

触发当前有click的元素,且该元素面朝用户的最前端,才会触发click。

上面B中,由于B绑定了click或者B本身存在click,所以B也被触发了,(因为在touchstart阶段就已经隐藏了A),于是就产生了点透事件

介绍下解决方法:

1.github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

 然后给需要的元素绑定click事件,这样就不会延时啦,据说还会比tap更快

 

 

2.为元素绑定touchend事件,并在内部加上e.preventDefault();

 监听touchend事件,阻止A元素的touchend的默认行为,从而阻止click事件的产生

 


参考:https://blog.csdn.net/qq_31751569/article/details/77922603

目录
相关文章
|
6月前
|
JavaScript 前端开发
点击事件中的this|click事件与change事件|v-model
点击事件中的this|click事件与change事件|v-model
43 0
|
12天前
|
设计模式 JavaScript 前端开发
addEventlistener和正常的onclick=()=> 的区别
【10月更文挑战第29天】`addEventListener` 是一种更推荐的添加事件处理函数的方式,它提供了更好的灵活性、可维护性和代码结构,能够满足复杂的事件处理需求,而 `onclick` 属性则更适合简单的、一次性的事件绑定场景,且在现代的JavaScript开发中,应尽量避免在HTML中直接使用 `onclick` 属性,以提高代码的质量和可维护性。
|
6月前
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
210 0
|
3月前
oninput和onchange事件有什么区别?
oninput和onchange事件有什么区别? 最新推荐文章于 2024-08-14 15:45:18 发布
114 0
|
6月前
|
开发者
移动端 click 事件、touch 事件、tap 事件的区别
移动端 click 事件、touch 事件、tap 事件的区别
34 1
|
6月前
|
JavaScript 前端开发
oninput 和 onchange 事件的区别
oninput 和 onchange 事件的区别
79 9
|
6月前
oninput事件和onchange事件的区别?
oninput事件和onchange事件的区别?
|
JavaScript
click与addEventListener和removeEventListener事件详解
click与addEventListener和removeEventListener事件详解
click与addEventListener和removeEventListener事件详解
|
Web App开发 JavaScript 前端开发
实现tap的多种方式
这是一个比较轻量的插件tap.js,142行代码,支持模块化开发。
实现tap的多种方式