js-移动端触屏事件

一、移动端触屏事件

1. touchstart：手指触碰到屏幕

document.addEventListener('touchstart',function() {
    console.log('I touch you');
})

2. touchmove：手指在屏幕上滑动

document.addEventListener('touchmove',function() {
    console.log('move');
})

3. touchend：手指离开屏幕

document.addEventListener('touchend',function() {
    console.log('leave');
})

二、TouchEvent 触摸事件对象

1. touches：正在触屏的所有手指的列表

2. targetTouches：正在被触摸的DOM元素上的手指列表（用的较多）

3. changedTouches：手指状态发生了改变的列表

三、拖动元素案例

var box = document.querySelector('.box');
var oddX = 0;
var oddY = 0;
var x = 0;
var y = 0;
box.addEventListener('touchstart', function(e) {
    oddX = e.targetTouches[0].pageX;
    oddY = e.targetTouches[0].pageY;
    x = this.offsetLeft;
    y = this.offsetTop;
})
box.addEventListener('touchmove', function(e) {
    e.preventDefault(); // 阻止滚动屏幕
    var moveX = e.targetTouches[0].pageX - oddX;
    var moveY = e.targetTouches[0].pageY - oddY;
    this.style.left = x + moveX + 'px';
    this.style.top = y + moveY + 'px';
})