移动端事件

touch事件、touchEvents对象、滑屏的思想与实现

移动端touch事件

1. touchstart
2. touchmove
3. touchend

let box = document.querySelector("#box");
    /*
        touchstart --> mousedown 
            手指触碰元素
        touchmove --> mousemove
            手指触碰元素之后,在屏幕中移动
        touchend --> mouseup
            手指触碰元素之后,从屏幕上抬起
    */
    box.addEventListener("touchstart",()=>{
        console.log("手指触碰")
    });
    box.addEventListener("touchmove",({target})=>{
        console.log("手指移动",target)
    });
    box.addEventListener("touchend",()=>{
        console.log("手指抬起")
    });

- 阻止默认事件
阻止 touchstart 事件带来的影响
阻止 touchmove 事件带来的影响

• 阻止 touchstart 默认事件带来的危害：

1.所有的 mouse 事件,全部都会失效(包括a标签的href)
2.滚动条不能拖动
3.没有办法获得焦点和失去焦点
4.多指不能缩放页面
5.长按选中会被阻止，系统菜单也会被阻止

阻止 touchmove 默认事件带来的危害:

1.滚动条不能拖动
2.多指不能缩放页面

TouchEvent 对象详解

-touches 当前屏幕上的手指列表

• targetTouches 当前元素上的手指列表
• changedTouches 触发当前事件的手指列表

滑屏

• 构思

1.摁下时，记录手指坐标和元素坐标
2.移动后，获取手指新坐标
3.计算手指移动距离 = 用移动后的手指 - 摁下时手指坐标
4.移动后的元素位置 = 手指移动距离 + 摁下时元素的坐标