移动端事件

touch 事件基础

事件名	事件描述
ontouchstart	触摸开始
ontouchmove	触摸移动
ontouchend	触摸结束

const boxEl = document.getElementById('box');
boxEl.addEventListener('touchstart', handleStart, false);
boxEl.addEventListener('touchmove', handleMove, false);
boxEl.addEventListener('touchend', handleEnd, false);
function handleStart() {
	console.log('touchstart');
}
function handleMove() {
	console.log('touchmove');
}
function handleEnd() {
	console.log('touchend');
}

touch 事件的 event 对象

• touches
  屏幕上所有手指的信息
• targetTouches
  目标元素上的手指的信息
• changedTouches
  有变化的手指的信息

以上三个对象所包含的信息

名称	含义
clientX	触摸目标在视口中的X坐标
clientY	触摸目标在视口中的Y坐标
force	手指点击力度（不准确）
identifier	唯一标识符
*pageX	触摸目标在页面中的X坐标
*pageY	触摸目标在页面中的Y坐标
radiusX	手指点击的X轴半径
radiusY	手指点击的Y轴半径
rotationAngle	旋转角度
screenX	触摸目标在屏幕中的X坐标
screenY	触摸目标在屏幕中的Y坐标
target	点击的目标

hammer.js

hammer 是监听其他事件的库

var boxEl = document.getElementById('box');
var hammer = new Hammer(boxEl);
hammer.on('swipe pan tap doubletap press pinch rotate', function (ev) {
	console.log(ev.type);
})