移动端触屏事件

移动端触屏事件

1. touchstart：当手指放到屏幕上触发。

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

2. touchmove：当手指在屏幕上滑动时，连续地触发。

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

3. touchend：当手指从屏幕上离开时触发。

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

TouchEvent 触摸事件对象

触摸事件对象

1. touches：正在触屏的所有手指的列表（当前屏幕上的手指信息列表）

   表示当前跟踪的触摸操作的touch对象的数组。

   当一个手指在触屏上时，event.touches.length=1,

   当两个手指在触屏上时，event.touches.length=2，以此类推。

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

   特定于事件目标的touch对象数组。

   因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

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

   表示自上次触摸以来发生了什么改变的touch对象的数组。

触摸事件对象属性

每个touch对象都包含下列几个属性：

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触摸的DOM节点目标。

拖动元素案例

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

标签：手指,触摸,端触,touch,事件,var,屏幕,移动,targetTouches
来源： https://www.cnblogs.com/yyshow/p/16294345.html