移动端事件、移动端事件对象、Touch.js

移动端事件

• ontouchstart: 手指按下事件
• ontouchmove: 手指移动事件
• ontouchend: 手指抬起事件
• 移动端比PC响应快
• 点透问题: 当上层元素发生点击事件, 在300ms内如果上层元素隐藏或者消失, 下层元素也能接受到事件, 下层元素不要使用具有点击特性的元素.

var box = document.getElementById("box");
box.addEventListener('touchstart', function () {
    
    
    console.log('touchstart');
});
box.addEventListener('touchmove', function () {
    
    
    console.log('touchmove');
});
box.addEventListener('touchend', function () {
    
    
    console.log('touchend');
});

移动端事件对象

box.addEventListener('touchstart', function (event) {
    console.log(event); // TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
    console.log(typeof event); // object
    console.log(event.touches); // 屏幕上所有手指的列表 TouchList {0: Touch, length: 1}
    console.log(event.targetTouches); // 位于当前元素上的手指的列表 TouchList {0: Touch, length: 1}
    console.log(event.changedTouches); // 涉及当前事件的手指的列表 TouchList {0: Touch, length: 1}

    var touch = event.changedTouches[0];
    console.log(touch);
    console.log(touch.identifier); // 标识符
    console.log(touch.target); // 目标源
    console.log(touch.clientX); // 手指的位置(相对于可视区)
    console.log(touch.clientY); // 手指的位置(相对于可视区)
    console.log(touch.pageX); // 手指的位置(相对于页面)
    console.log(touch.pageY); // 手指的位置(相对于页面)
    console.log(touch.screenX); // 手指的位置(相对于屏幕)
    console.log(touch.screenY); // 手指的位置(相对于屏幕)
    console.log(touch.force); // 压力
    console.log(touch.radiusX); // 半径
    console.log(touch.radiusY);
    console.log(touch.rotationAngle); // 角度
});

Touch.js

• touch.js是移动端设备上的手势识别和事件库, 由百度云Clouda团队维护.

// 事件绑定
// touch.on(element, event, callback);
// element(element/string): 事件元素或者对应得选择器
// event(string): 事件类型, 可以接受多个事件使用空格隔开, 支持原生事件
// callback(function): 事件处理函数, 事件处理函数中的this表示触发事件的元素

// var box = document.getElementById('box');
// touch.on(box, 'tap', function () {
//     console.log('tap');
// });

// 元素可以直接使用选择器
// touch.on('#box', 'tap', function () {
//     console.log('tap');
// });

// 可以同时绑定多个事件
// touch.on('#box', 'tap doubletap hold', function () {
//     console.log('tap doubletap hold');
// });

// 支持原生事件
// touch.on('#box', 'touchstart', function () {
//     console.log('tap doubletap hold');
// });

• 事件代理

// element: 代理原生 type: 事件类型 selector: 被代理元素 callback: 事件处理函数
// touch.on(element, type, selector, callback);
// 事件处理函数中的this表示触发事件的元素
touch.on('ul', 'tap', 'li', function () {
    console.log('tap');
    console.log(this);
    this.style.background = 'tomato';
});

• 事件对象

touch.on('#box', 'tap', function (event) {
    console.log(event); // CustomEvent {isTrusted: false, originEvent: MouseEvent, fingersCount: 1, position: {…}, startRotate: ƒ, …}
    console.log(typeof event); // object
    console.log(event.originEvent); // 原生事件对象 TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
    console.log(event.type); // 事件类型
    console.log(event.target); // 触发事件的元素
    console.log(event.rotation); // 旋转角度
    console.log(event.scale); // 缩放比例
    console.log(event.direction); // 操作的方向
    console.log(event.fingersCount); // 手指数量
    console.log(event.position); // 位置
    console.log(event.distance); // swipe两点之间的距离
    console.log(event.distanceX);
    console.log(event.distanceY);
    console.log(event.angle); // 角度
    console.log(event.duration); // touchstart与touchend之间的时长
});