目录
一、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 获取
手指滑动距离 = 手指滑动中的位置 - 手指刚触摸时候的初始位置
盒子移动距离 = 手指移动距离 + 盒子原来的位置
-
触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
-
移动手指touchmove：计算手指的滑动距离，并且移动盒子。
-
离开手指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(); //阻止屏幕滚动的默认行为
})