时间：2021-07-01 10:21:17 帮助过：20人阅读
在pc端是点击事件，但是在移动端是单击事件，在移动端的项目中我们经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行，在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后，还需要等到300ms看是否触发了第二次点击，如果触发了第二次点击就不属于click了，没有触发第二次点击才属于click
但是，在某些场景下需要取消延迟：（1）静止缩放： 使用这个方法必须完全禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，但是部分苹果手机还是不行；
width - viewport的宽度； height - viewport的高度 ；initial-scale - 初始的缩放比例； minimum-scale - 允许用户缩放到的最小比例； maximum-scale - 允许用户缩放到的最大比例 ；user-scalable - 用户是否可以手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
（2）fastclick.js： FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉
第一步：在页面中引入fastclick.js文件。
第二步：在js文件中添加以下代码： 在 window load 事件之后，在body上调用FastClick.attach()即可。
window.addEventListener(function(){
FastClick.attach( document.body );
},false );如果你项目使用了JQuery，就将上面的代码改写成：
$(function() {
FastClick.attach(document.body);
});替换移动端的click事件：
（1）使用touchstart :touch事件包括touchstart、touchend、touchmove等，简单使用touchstart来替换click，但问题是，如果我想在同一对象上绑定一个单击事件和一个滑动事件怎么办，这时候就会出现冲突;在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click
touch事件的模型：
| 事件名 | 作用 |
|---|---|
| touchstart | 手指按到屏幕上 |
| touchmove | 手指在屏幕上滑动 |
| touchend | 手指离开屏幕 |
| touchcancle |
特殊情况下关闭/退出时触发
|
touch事件的属性：
| 属性名 | 作用 |
|---|---|
| type | 事件类型 |
| target | 事件源 |
| preventDefault（returnValue） | 阻止默认行为 |
| stopPropagation（cancleBubble） | 停止事件的传播 |
| touches[0].clientX | 触碰位置的x值 |
| changedTouches | 当前的值和离开的值 |
（2）tap事件：标准事件中没有tap事件，tap事件是一些库，如zepto，使用touch进行封装的，在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置且时间间隔较短，且过程中未曾触发touchmove事件，则调用回调函数；过300ms后还是会产生click事件，只是在该对象上没有进行监听，由此产生了“点透”现象： 1）页面弹出一个模态框，模态框上有个按钮（关闭模态框），按钮正下方（在主页面上）有一个输入框 ；2）当点击模态框上的关闭按钮，模态框立即消失，但300ms后click事件触发，而输入框正好监听click事件，因此输入框会得到焦点
pc端常用的事件：
| 事件名 | 作用 |
|---|---|
| click | 当鼠标点击时触发 |
| mouseover | 当鼠标指针移动到元素上时触发 |
| mouseout | 当鼠标指针移出元素时触发 |
| mouseenter | 当鼠标指针移动到元素上时触发（不支持冒泡） |
| mouseleave | 当鼠标指针移出元素上时触发（不支持冒泡） |
| mousemove | 当鼠标指针移动到元素上时触发 |
| mousedown | 当元素上按下鼠标按钮时触发 |
| mouseup | 当在元素上释放鼠标按钮时触发 |
| mousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
| keydown | 在用户按下按键时触发 |
| keyup | 当用户释放按键时触发 |
| load | 页面结束加载之后触发 |
| scroll | 当元素滚动条被滚动时运行的脚本 |
| blur | 元素失去焦点时运行的脚本 |
| focus | 当元素获得焦点时运行的脚本 |
| change | 在元素值被改变时运行的脚本 |
移动端常用的事件：
| 事件名 | 作用 |
|---|---|
| click | 当点击时触发（单击） |
| load | 页面结束加载之后触发 |
| scroll | 当元素滚动条被滚动时运行的脚本 |
| blur | 元素失去焦点时运行的脚本 |
| focus | 当元素获得焦点时运行的脚本 |
| change | 在元素值被改变时运行的脚本 |
| input | 代替keyup、keydown |
| touch事件模型 | 处理单手指操作 |
| gesture事件模型 | 处理多手指操作 |
使用原生JS封装Tap事件，解决移动端300ms延迟
详细介绍JavaScript移动端事件的基础及对常用事件库的总结
以上就是js中点击事件与常用的事件（pc端和移动端）概述的详细内容，更多请关注Gxl网其它相关文章！