4.2Zepto之移动端Touch事件

移动端Touch事件

1.Zepto实现tap事件

虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的
在原生的JS中专门为移动端新增了如下几个事件：
touchstart: 手指按下
touchmove: 手指在元素上移动
touchend : 手指抬起
注意点: 这几个事件只支持移动端, 不支持PC端

2.Touch事件对象

移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们
移动端touch事件对象中比较重要的三个子对象:

touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
       console.log("touches1", event.touches);
       console.log("targetTouches1", event.targetTouches);
    }
    oDiv1.ontouchend = function (event) {
        console.log("touches2", event.touches);
        console.log("targetTouches2", event.targetTouches);
    }

1. touches和targetTouches
   如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的
   如果是将手指按到了不同的元素上, 那么这个两个对象中保存的内容不一样
   touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指
2. changedTouches
   在ontouchstart中保存的是刚刚新增的手指
   在ontouchend中保存的是刚刚离开的手指

3.Touch事件位置

1. 1.screenX/screenY是相对于屏幕左上角的偏移位
2. clientX/clientY是相对于可视区域左上角的偏移位
3. pageX/pageY是相对于内容左上角的偏移位

<div></div>
<script>
    let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function (event) {
        console.log(event.targetTouches[0]);
        console.log(event.targetTouches[0].screenX);
        console.log(event.targetTouches[0].screenY);
        console.log(event.targetTouches[0].clientX); 
        console.log(event.targetTouches[0].clientY); 
        console.log(event.targetTouches[0].pageX);  
        console.log(event.targetTouches[0].pageY);  
    }
</script>