JS mobile terminal touch screen event

One 、 Mobile touch screen events

1. touchstart： Touch the screen with your finger

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

2. touchmove： Fingers sliding on the screen

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

3. touchend： Fingers off the screen

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

Two 、TouchEvent Touch the event object

1. touches： A list of all fingers that are touching the screen

2. targetTouches： Being touched DOM List of fingers on the element （ Use more ）

3. changedTouches： List of finger states that have changed

3、 ... and 、 Drag element cases

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(); //  Prevent scrolling the screen 
    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';
})