js中点击事件与常用的事件(pc端和移动端)概述

php是最好的语言
Lepaskan: 2018-08-07 10:10:31
asal
5203 orang telah melayarinya

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">
Salin selepas log masuk

(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 );
Salin selepas log masuk

如果你项目使用了JQuery,就将上面的代码改写成:

$(function() {    
    FastClick.attach(document.body);    
});
Salin selepas log masuk

替换移动端的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移动端事件的基础及对常用事件库的总结

Atas ialah kandungan terperinci js中点击事件与常用的事件(pc端和移动端)概述. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan