05-JavaScript 中的 `tap` 和 `click` 事件

JavaScript 中的 tapclick 事件

笔记+分享
在现代Web开发中,尤其是针对移动设备的开发,处理用户交互事件是一个重要的挑战。尽管 click 事件在桌面浏览器中广泛使用,但 tap 事件在移动设备上提供了更合适的用户体验。这篇文章将深入探讨 tapclick 事件的区别,包括它们的性能、实际应用场景、事件模型以及调试和优化技巧。

一、click 事件的详细解析

click 事件是一个标准的 DOM 事件,当用户点击某个元素时触发。这个事件在桌面浏览器和移动浏览器中都得到广泛支持。

1.1 click 事件的触发机制

click 事件的触发涉及以下几个步骤:

  1. 用户按下鼠标按钮 (mousedown)。
  2. 用户释放鼠标按钮 (mouseup)。
  3. 浏览器检测到上述两个事件发生在同一个元素上,触发 click 事件。
javascript
复制代码
document.getElementById('myButton').addEventListener('click', function() {alert('Button clicked!');
});
1.2 移动设备上的 click 事件

在移动设备上,click 事件会有大约 300 毫秒的延迟。这个延迟的原因是为了检测用户是否在进行双击操作。在触摸屏上,浏览器需要确定用户是否要进行双击缩放,这通常会导致用户体验不佳。

二、tap 事件的详细解析

tap 事件专门设计用于移动设备上的触摸交互。它通常由第三方库(如 jQuery Mobile 或 Hammer.js)提供。

2.1 tap 事件的触发机制

tap 事件的触发机制与 click 类似,但省略了 300 毫秒的延迟。具体步骤如下:

  1. 用户触摸屏幕 (touchstart)。
  2. 用户移开手指 (touchend)。
  3. 如果在短时间内且没有移动太远(即不是滑动手势),触发 tap 事件。
var myElement = document.getElementById('myButton');
var mc = new Hammer(myElement);
mc.on('tap', function() {alert('Button tapped!');
});
三、性能对比与应用场景
3.1 性能比较

click 事件在桌面设备上表现良好,但在移动设备上,由于 300 毫秒的延迟,用户体验较差。tap 事件则没有这种延迟,响应更快,提供更流畅的用户体验。

3.2 应用场景
  • 桌面设备:在桌面设备上,click 事件是默认选择,因为它是原生支持的标准事件,兼容性最好。
  • 移动设备:在移动设备上开发应用时,使用 tap 事件能避免延迟,提供更好的用户体验。如果应用需要处理复杂的手势交互,使用支持手势的库(如 Hammer.js)会更方便。
四、事件模型与冒泡机制
4.1 事件冒泡

clicktap 事件都遵循 DOM 的事件冒泡机制,即事件会从目标元素向上传递到其父元素,直到根元素。

document.getElementById('parent').addEventListener('click', function() {console.log('Parent clicked!');
});
document.getElementById('myButton').addEventListener('click', function() {console.log('Button clicked!');
});

在这个示例中,点击 myButton 会先触发其自身的 click 事件,然后冒泡到 parent 元素,触发 parentclick 事件。

4.2 阻止事件冒泡

可以通过 event.stopPropagation() 来阻止事件冒泡。

document.getElementById('myButton').addEventListener('click', function(event) {console.log('Button clicked!');event.stopPropagation();
});

在这个示例中,点击 myButton 只会触发其自身的 click 事件,不会冒泡到 parent

五、调试与优化技巧
5.1 使用浏览器开发工具

现代浏览器的开发工具(如 Chrome DevTools)可以帮助你调试事件绑定和触发情况。通过检查事件监听器,确保正确绑定和触发 tapclick 事件。

const button = document.getElementById('myButton');
console.dir(button); // 在控制台中查看元素及其事件监听器
5.2 避免事件重叠

在处理 tapclick 事件时,确保不会同时触发两个事件,导致重复处理。可以通过使用标志变量或事件取消来避免这种情况。

let tapped = false;const handleClick = () => {if (!tapped) {console.log('Button clicked!');}tapped = false;
};const handleTap = () => {tapped = true;console.log('Button tapped!');
};const myButton = document.getElementById('myButton');
myButton.addEventListener('click', handleClick);const mc = new Hammer(myButton);
mc.on('tap', handleTap);
5.3 性能优化

确保在事件处理函数中避免执行繁重的计算或操作,以防止阻塞主线程,影响用户体验。可以将复杂操作延迟到事件处理函数之外。

const handleTap = () => {requestAnimationFrame(() => {console.log('Button tapped!');// 执行繁重操作});
};const mc = new Hammer(myButton);
mc.on('tap', handleTap);
六、总结

理解 tapclick 事件的区别,以及它们在不同设备和应用场景中的表现,对于开发高效、响应迅速的跨平台应用至关重要。click 事件适用于桌面设备,而 tap 事件在移动设备上提供更好的用户体验。通过掌握事件模型、调试和优化技巧,可以显著提升用户的交互体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/23018.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM之【字节码/Class文件/ClassFile 内容解析】

说在前面的话 Java语言:跨平台的语言(write once,run anywhere) 当Java源代码成功编译成字节码后,如果想在不同的平台上面运行,则无须再次编译这个优势不再那么吸引人了。Python、PHP、Perl、Ruby、Lisp等有强大的解释器。跨平台似乎已经快成为一门语言…

Vue 3 Teleport:掌控渲染的艺术

title: Vue 3 Teleport:掌控渲染的艺术 date: 2024/6/5 updated: 2024/6/5 description: 这篇文章介绍了Vue3框架中的一个创新特性——Teleport,它允许开发者将组件内容投送到文档对象模型(DOM)中的任意位置,即使这个位…

房地产3d全景数字化看房成为转发的好工具

在短视频盛行的时代,某地产企业为了吸引客流,联合我们深圳VR公司定制了楼盘小区3D全景展示视频,不同于市面上常见的楼盘视频或3D电影,楼盘小区3D全景展示视频让您在小区建成之前,就能提前感受未来的生活场景。 无需昂贵…

C++第三方库【httplib】断点续传

什么是断点续传 上图是我们平时在浏览器下载文件的场景,下载的本质是数据的传输。当出现网络异常,浏览器异常,或者文件源的服务器异常,下载都可能会终止。而当异常解除后,重新下载文件,我们希望从上一次下载…

【技巧】系统语音是英文 影刀如何设置中文-作者:【小可耐教你学影刀RPA】

写在前面 嘿哈! 有些跨境或香港的小伙伴,可能需要使用英文操作界面的影刀 该功能目前还没有现成的可视化按钮🔘 但其实这个效果可以实现~ 1、效果图 2、实现原理 %影刀安装目录%\ShadowBot-版本号\ShadowBot.Shell.dll.confi…

2024050401-重学 Java 设计模式《实战代理模式》

重学 Java 设计模式:实战代理模式「模拟mybatis-spring中定义DAO接口,使用代理类方式操作数据库原理实现场景」 一、前言 难以跨越的瓶颈期,把你拿捏滴死死的! 编程开发学习过程中遇到的瓶颈期,往往是由于看不到前进…

机器学习:更多关于元学习

目录 Meta Learning vs Self-supervised Learning 自监督学习——找初始化的参数MAML 自动学出合适的参数 MAML:不断的学初始化参数MAML的初始化参数来自BERT MAML:找出来的初始化参数能在训练任务上表现的很好BERT:自监督目标是不同的下游任…

odoo10 权限控制用户只允许看到自己的字段

假设一个小区管理员用户&#xff0c;只想看到自己小区的信息。 首先添加一个用户信息选项卡界面&#xff0c;如下图的 用户 > 隶属信息&#xff1a; 我们在自己创建的user模块中&#xff0c;views文件夹下添加base_user.xml <?xml version"1.0" encoding&q…

Leetcode:最接近的三数之和

题目链接&#xff1a;16. 最接近的三数之和 - 力扣&#xff08;LeetCode&#xff09; 普通版本&#xff08;排序 双指针&#xff09; 主旨&#xff1a;最近值即为差值的绝对值最小值 class Solution { public:int threeSumClosest(vector<int>& nums, int target…

DBSCAN 算法【python,机器学习,算法】

DBSCAN 即 Density of Based Spatial Clustering of Applications with Noise&#xff0c;带噪声的基于空间密度聚类算法。 算法步骤&#xff1a; 初始化&#xff1a; 首先&#xff0c;为每个数据点分配一个初始聚类标签&#xff0c;这里设为0&#xff0c;表示该点尚未被分配…

Angular17(2):angular项目中使用NG-ZORRO

1、使用Angular CLI创建空项目 ng new angular-admin-web --stylescss 2、执行ng add ng-zorro-antd命令安装 &#xff08;1&#xff09;ng add ng-zorro-antd 在angular项目下运行命令 ng add ng-zorro-antd 跟随选项便可完成初始化配置&#xff0c;包括引入国际化文件&…

多模块工程中Controller中注入Service报错的问题

问题 2024-06-05 22:05:12,241 ERROR [http-nio-8888-exec-1][DirectJDKLog.java:175] - Servlet.service() for servlet [dispatcherServlet] in context with path [/content] threw exception [Request processing failed; nested exception is org.apache.ibatis.binding.…

上位机图像处理和嵌入式模块部署(f407 mcu中的单独上位机烧录方法)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;stm32有三种烧录方法&#xff0c;一种是st-link v2&#xff0c;一种是dap&#xff0c;一种是j-link。不过我们在实际操作…

C++基础编程100题-004 OpenJudge-1.1-06 空格分隔输出

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0101/06/ 描述 读入一个字符&#xff0c;一个整数&#xff0c;一个单精度浮点数&#xff0c;一个双精度浮点数&#xff0c;然后按顺序输出它们&#xff0c;并且要求在他们之间用一个空格分隔。输出浮点数时保留…

Hadoop yixing(移行),新增表字段,删除表字段,修改存储格式

Hadoop yixing(移行)&#xff0c;新增表字段&#xff0c;删除表字段&#xff0c;修改存储格式 一、hadoop中修改存储格式&#xff0c;比如从 textfile 转化为 orc 格式&#xff0c;表中的数据的组织形式要重新改变&#xff0c;就要将重新创建新格式的表将原来的数据按照新的格…

中信证券:A股下半年将迎来年度级别上涨行情的起点

中信证券认为&#xff0c; 过去3年压制A股表现的经济动能转换&#xff0c;资本市场生态&#xff0c;中美战略博弈这三大叙事都将迎来重大拐点&#xff0c;随着政策、价格、外部三类信号逐步验证&#xff0c;2024年下半年A股市场将迎来年度级别上涨行情的起点 过去3年压制A股表…

鸿蒙开发接口安全:【@ohos.userIAM.userAuth (用户认证)】

用户认证 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import userIAM_userAuth from ohos.userIAM.userAuth;完整示例 // API version 6 import userIAM_userAuth from ohos.use…

最小栈、栈的弹出(C++)

1.最小栈 思路分析&#xff1a; 代码&#xff1a; class MinStack { public:MinStack() {}void push(int val) {st.push(val);//两种情况需要更新最小值//1.最小栈为空(就是存最小值的那个栈)//2.插入的值小于或等于最小栈的栈顶元素if(minstack.empty()||minstack.top()>…

C++--DAY3

思维导图 设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std; class …

006 RabbitMQ

文章目录 为什么要使用RabbitMQ异步处理解耦流量削峰数据同步 使用RabbitMQ的场景异步处理应用解耦数据同步流量削峰 RabbitMQ有哪些工作模式简单模式&#xff1a;Work模式&#xff1a;订阅模式&#xff08;Publish/Subscribe&#xff09;&#xff1a;路由模式&#xff08;Rout…