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);
})