移动端touch触摸事件与click延时问题的解决

目录

一.触摸事件对象TouchEvent

二.解决click延迟问题 

---

移动端也有自己的事件对象，最常用的无非就是touch触摸事件：

touchstart：手指触摸到一个DOM元素时触发

touchmove：手指在一个DOM元素上滑动时触发

touchend：手指从一个DOM元素上移开时触发

const box = document.querySelector('div')
box.addEventListener('touchstart',function(e){
    console.log('你竟然摸我')
    console.log(e.targetTouches[0]);//获得第一个触摸元素的手指的信息，例如：坐标等等
})
box.addEventListener('touchmove',function(){
    console.log('你竟然滑动我')
})
box.addEventListener('touchend',function(){
    console.log('你竟然移开，给我继续！！')
})

 移动端触摸控制 - 游戏开发环境 | MDN

一.触摸事件对象TouchEvent

touches：正在触摸屏幕的所有手指的一个列表（也就是触点个数的统计）

targetTouches：正在触摸当前DOM元素上的手指列表

changedTouches：手指状态（从无到有-从有到无）发生了改变的列表

TouchEvent - Web API 接口参考 | MDN

阻止屏幕滚动的默认行为：e.preventDefault()

监听过渡完成的事件：transitionend 

transitionend - Web API 接口参考 | MDN

window.addEventListener('DOMContentLoaded',function(){
    const div = document.querySelector('div')
    div.addEventListener('touchstart',function(e){
        console.log(e.targetTouches)
        //手指点击元素之后，在该元素上不能拖动页面
        e.preventDefault()
    })
})

---

二.解决click延迟问题 

移动端的点击事件是会有300毫毛的延时，本质是因为在移动端中，点击俩下默认会缩放页面，所以系统需要等待用户点击第二下

如果想要禁用这个缩放的话我们可以使用这俩种较为简单的方法：

1.在meta视口标签中写入不可缩放

2.使用fastclick包（第三方库/包/插件/模块）

原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

fastclick - npm

最后提一种：利用touchstart和touchend来模拟click事件 ，也就是利用touch事件自己封装一个事件