js中除了日常用的click、keydown等等事件类型外还有一种针对移动端的touch事件,即触摸事件,而且算是同一组事件。
- touchstart 当手指触摸屏幕的时候触发
- touchmove 当手指在屏幕来回滑动的时候触发
- touchmove 当手指离开屏幕的时候触发
- touchcancel 当被迫终止滑动的时候触发(来电、弹消息等)
使用touch事件
- box.addEventListenner(‘touchstart’,function(){})
- 触摸事件的事件对象:
- changeTouches 改变后触摸点的集合–每个时间都会记录
- targetTouches 当前元素的触摸点的集合–当离开屏幕的时候无法记录
- touches 页面上所有触摸点的集合–当离开屏幕的时候无法记录
- 属性值都是touchList–触摸点的集合
以下是一部分示例:
var box = document.querySelector('.box');
box.addEventListener('touchstart',function (e) {
console.log('start');
console.log(e.touches[0].clientX);
})
box.addEventListener('touchmove',function (e) {
console.log('move');
console.log(e.touches[0].clientX);
})
box.addEventListener('touchend',function (e) {
console.log('end');
console.log(e);
})