web移动端触屏事件

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>