28. 移动端touch触摸事件

目录

一、touch相关属性

1. touchstart  手指点击屏幕触发

2. touchmove   手指移动触发

3. touchend   手指离开触发

二、TouchEvent相关触摸事件对象

三、移动端拖动元素原理

---

一、touch相关属性

1. touchstart  手指点击屏幕触发

       div.addEventListener('touchstart', function() {

           console.log('我摸了你');

       });

2. touchmove   手指移动触发

       div.addEventListener('touchmove', function() {

           console.log('我一直摸你');

       });

3. touchend   手指离开触发

       div.addEventListener('touchend', function() {

           console.log('我走了');

       });

---

二、TouchEvent相关触摸事件对象

• touches 指正在触摸屏幕的所有手指的列表

• targetTouches 指正在触摸DOM元素的所有手指列表

• changedTouches  指的是手指状态发生改变的列表，从无到有 或者从有到无

• 一般都是触摸元素，所以最经常使用的是targetTouches

• e.targetTouches[0]得到的是正在触摸dom元素的第一个手指的相关信息，比如手指坐标等

---

三、移动端拖动元素原理

当前手指的坐标可以通过targetTouches[0]里面的pageX和pageY 获取

手指滑动距离 = 手指滑动中的位置 - 手指刚触摸时候的初始位置

盒子移动距离 = 手指移动距离 + 盒子原来的位置

1. 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置

2. 移动手指touchmove：计算手指的滑动距离，并且移动盒子。

3. 离开手指touchend

注意：手指移动也会触发滚动屏幕，所以要阻止默认的屏幕滚动 e.preventDefault();

var div = document.querySelector('div');

        // 定义盒子的初始位置 变量

        var x = 0;

        var y = 0;

        // 定义手指触摸初始位置 变量

        var startX = 0;

        var startY = 0;

        div.addEventListener('touchstart', function(e) {

            // 把初始获取的手指的x和y坐标赋值给最开始定义的变量

            startX = e.targetTouches[0].pageX;

            startY = e.targetTouches[0].pageY;

            // 把初始获取的div的x和y坐标赋值给最开始定义的变量

            x = this.offsetLeft;

            y = this.offsetTop;

        });

        div.addEventListener('touchmove', function(e) {

            // 计算手指移动距离 = 手指移动后的坐标 -  手指的初始距离

            var moveX = e.targetTouches[0].pageX - startX;

            var moveY = e.targetTouches[0].pageY - startY;

            // 移动我们的盒子，盒子移动的距离 = 盒子初始的位置 + 手指移动的距离，赋值给盒子的left和top

            this.style.left = x + moveX + 'px';

            this.style.top = y + moveY + 'px';

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

        })