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

目录
相关文章
|
12月前
|
API C# Windows
【C#】在winform中如何实现嵌入第三方软件窗体
【C#】在winform中如何实现嵌入第三方软件窗体
616 0
|
8月前
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `<audio>` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
403 0
|
缓存 安全 数据库
认证服务---OAuth2.0基本介绍,微博登录整合到实际项目中【下篇】
该博客文章介绍了如何在项目中实际应用社交登录功能,通过使用微博的OAuth 2.0授权流程来实现用户的登录和注册。
认证服务---OAuth2.0基本介绍,微博登录整合到实际项目中【下篇】
|
11月前
|
监控 关系型数据库 MySQL
MySQL自增ID耗尽应对策略:技术解决方案全解析
在数据库管理中,MySQL的自增ID(AUTO_INCREMENT)属性为表中的每一行提供了一个唯一的标识符。然而,当自增ID达到其最大值时,如何处理这一情况成为了数据库管理员和开发者必须面对的问题。本文将探讨MySQL自增ID耗尽的原因、影响以及有效的应对策略。
487 3
|
11月前
|
缓存 Linux 开发者
Avalonia开源控件库强力推荐-Semi.Avalonia
【11月更文挑战第3天】Semi.Avalonia 是一个基于 Avalonia 的开源控件库,提供了丰富的自定义控件和扩展功能。它支持多种样式按钮、高级输入控件和灵活的布局容器,简化了属性设置,并提供了详细的文档支持。Semi.Avalonia 还支持多种内置主题和自定义主题,具备高效的渲染机制和合理的资源管理,适用于跨平台桌面应用程序开发。
696 2
|
人工智能 自然语言处理 机器人
【Prompt Engineering 提示词工程指南】​文本概括、信息提取、问答、文本分类、对话、代码生成、推理​
本文介绍了使用提示词与大语言模型(LLM)交互的基础知识。通过调整参数如温度(Temperature)、最高概率词元(Top_p)、最大长度(Max Length)及停止序列(Stop Sequences),可以优化模型输出。温度参数影响结果的随机性;Top_p 控制结果的多样性;最大长度限制输出长度;停止序列确保输出符合预期结构。此外,频率惩罚(Frequency Penalty)和存在惩罚(Presence Penalty)可减少重复词汇,提升输出质量。提示词需包含明确指令、上下文信息、输入数据及输出指示,以引导模型生成理想的文本。设计提示词时应注重具体性、避免歧义,并关注模型的具体行为
1316 1
【Prompt Engineering 提示词工程指南】​文本概括、信息提取、问答、文本分类、对话、代码生成、推理​
|
小程序
微信小程序wx.previewImage实现图片预览
微信小程序wx.previewImage实现图片预览
1337 0
|
Java 数据安全/隐私保护 iOS开发
Windows 平台上也可以进行 iOS App 的开发
为了将 iOS APP 上架至 App Store,我们需要准备以下基本需求资料:1. 苹果开发者账号(如果还没有账号,需要先申请,可以参考苹果开发者账号申请教程)