1.移动端与pc端的区别
移动端没有鼠标,自然也没有鼠标事件。所以onmousedown之类的事件监听在移动端时无效的。
移动端为了响应双击事件,onclick事件有300ms的延迟,因为要看看接下来的300ms有没有再次点击,有的话视为双击,没有的话视为单击。
下面的代码可以验证当前手机上onclick事件的延迟(在没有设置viewport的时候运行)
<script>
var now
document.ontouchstart = function(){
// 返回 1970 年 1 月 1 日至今的毫秒数
now = new Date().getTime()
console.log("touchstrat")
}
document.onclick=function(){
// 计算延时
var delay = new Date().getTime() - now
console.log("onclick")
console.log(delay+"ms")
// 真机测试使用alert()
}
</script>
2.touch事件
touch事件没有延迟,它是移动端特有的,,pc端不支持
他有以下几个事件:
touchstart:开始触屏事件
touchmove:手指滑动事件(持续触发)
touchstend:触屏结束事件
touchcancal:触屏意外中断事件(手机中途来电?)
基本用法:
<script>
document.addEventListener("touchstart",function(){
console.log("touchstart")
})
document.addEventListener("touchmove",function(){
console.log("touchmove")
})
document.addEventListener("touchend",function(){
console.log("touchend")
})
</script>
如果在touchstart中阻止了默认事件,则onlcik事件不会被触发(阻止默认事件不要挂载到document上,浏览器可能不支持)
<script>
var wrap = document.getElementById("wrap")
wrap.addEventListener("touchstart",function(e){
console.log("touchstart")
e.preventDefault()
})
wrap.addEventListener("touchmove",function(e){
console.log("touchmove")
})
wrap.addEventListener("touchend",function(e){
console.log("touchend")
})
wrap.addEventListener("click",function(e){
console.log("click")
})
</script>
3.touchEvent事件对象
touchEvent事件对象描述了当前事件中的一系列信息
e.touches:当前屏幕上所有触摸点的列表
targetTouches:当前对象上所有触摸点的列表
changeTouches:触发事件时改变的触摸点的集合
每个touch事件包含下面的属性:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
4.onclick事件延迟的处理
实际开发中300ms的延迟让用户的体验非常不好,我们自然要把延迟去除
方法一: 更改默认视口宽度
<meta name="viewport" content="width=device-width">
方法二:禁用缩放(移动端双击事件是为了缩放屏幕,如果通过meta标签禁用了屏幕缩放,双击事件就失效了,onclick延迟自然也就没有了)
<meta name="viewport" content="user-scalable=no">
PS:这两个属性一般在设置viewport的时候都是同时存在的,这里列出来只是证明他们单独存在都能取消click的延迟
方法三:fastclick
原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
步骤:引入fastclick文件,在页面成功加载后,执行FastClick.attach()函数,并传入相应的dom元素
缺点: 脚本相对较大
<!-- 引入fastclick -->
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
<!-- 初始化 -->
<script>
window.onload = function(){
// 初始化,传入的参数表明整个页面中FastClick都生效
FastClick.attach(document.body)
var now
var wrap = document.getElementById("wrap")
wrap.addEventListener("touchstart",function(e){
console.log("touchstart")
now = new Date().getTime()
//e.preventDefault()
})
wrap.addEventListener("touchmove",function(e){
console.log("touchmove")
})
wrap.addEventListener("touchend",function(e){
console.log("touchend")
})
wrap.addEventListener("click",function(e){
console.log("click")
var delay = new Date().getTime() - now
console.log(delay)
})
}
</script>