1.点击事件:
在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事件模型 | 处理多手指操作 |
详细介绍JavaScript移动端事件的基础及对常用事件库的总结
Atas ialah kandungan terperinci js中点击事件与常用的事件(pc端和移动端)概述. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!