移动端 的属性 touch

1 只有移动端才有touch 事件 三个分别为

touchstart 手指触碰屏幕时触发

touchmove 手指移动时触发

touchend 手指离开时触发

可以用来解决click 在移动端延迟问题 click事件在移动端的延迟在80-120之间一般 可以用下面代码测试实际时间

<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 的基本使用

let oDiv = document.querySelector("div");

    oDiv.addEventListener("touchstart",function () {

        console.log("开始触摸");
    });

    oDiv.addEventListener("touchmove",function () {

        console.log("移动一手指");
    });

    oDiv.addEventListener("touchend",function () {

        console.log("结束触摸---")
    });

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 使用注意问题 点透问题
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件,而下面的元素监听click事件,
并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题
出现的原因是 .当我们手指触摸屏幕的时候，系统会生成2个事件，一个是touch事件,一个是click事件,
touch事件优先click事件执行, click事件相对会延迟 100-300毫秒
当touch事件执行的时候pink粉色盒子的display属性更改为none，粉色盒子消失，而click事件在200毫秒之后，执行的时候，发现粉色盒子已经消失，那么click事件就会执行 对应的触摸点位置的box盒子，进而触发box盒子的click事件 用阻止事件解决

 //粉色盒子
    oTap.addEventListener("touchstart",function (event) {
        event = event || window.event;
        oTap.style.display = "none";
        //阻止事件的默认行为
        event.preventDefault();
    })