javaScript系列---【移动端事件--touch.js知识点总结】

1、移动端事件

1、移动端事件

移动端常用的事件，主要有三个，分别是：

• ontouchstart(手指按下)

• ontouchmove(手指移动)

• ontouchend(手指抬起)

注意：移动端事件绑定，要用addEventListener

var box = document.getElementById('box');

// 手指按下

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

// 手指移动 (在移动的过程中，会不断的触发)

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

​
// 手指抬起

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

2、移动端事件和PC端事件区别

• 1、PC端事件比移动端的慢300ms

• 2、移动端事件会有点透的问题

3、移动端事件对象

移动端事件：相对于pc端事件，它多出一个关于手指的列表

• ev.touches 当前位于屏幕上的所有手指的一个列表

• ev.targetTouches：位于当前DOM元素上的手指的一个列表

• ev.changedTouches：涉及当前事件的手指的一个列表（一般使用这个）

var box = document.getElementById('box');
​
// 这个事件发生的时候，跟这个事件有关的一些详细信息保存在一个对象中，这个对象就是事件对象
box.addEventListener('touchstart', function (ev) {
    // console.log(ev); // 事件对象
​
    // 手指的列表：类数组
    console.log(ev.touches); // 当前位于屏幕上的所有手指的一个列表
    console.log(ev.targetTouches); // 位于当前DOM元素上的手指的一个列表
    console.log(ev.changedTouches); // 涉及当前事件的手指的一个列表（一般使用这个）
​
    var touch = ev.changedTouches[0]; // 其中的一根手指
    // console.log(touch);
    console.log(touch.target); // 目标源
    console.log(touch.pageX, touch.pageY); // 到文档
    console.log(touch.clientX, touch.clientY); // 到可视区
    console.log(touch.screenX, touch.screenY); // 到屏幕
​
    console.log(touch.radiusX, touch.radiusY); // 手指的半径
    console.log('手指的标识', touch.identifier); // 手指的标识
    console.log('压力大小', touch.force); // 压力大小
    console.log('旋转角度', touch.rotationAngle); // 旋转角度
})

2、touch.js库

1、介绍

Touch.js是移动设备上的手势识别与事件库，由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具

Touch.js手势库专为移动设备设计， 请在Webkit内核浏览器中使用。

下载：https://www.bootcdn.cn/touchjs

2、事件绑定

格式：touch.on( element, types, callback );

// touch.on(element, types, callback);
// 参数说明：
//      element(element或string)：事件代理元素对象、选择器；
//      types(string)：事件的类型（多为手势事件，参见第五节，手势事件），可接受多个事件以空格分开；支持原生事件；
//      callback(function)：事件处理函数, 移除函数与绑定函数必须为同一引用；回调函数中的this即触发事件的这个元素；
​
var box = document.getElementById('box');
touch.on(box, 'touchstart', function () {
    console.log('touchstart');
});
​
​
touch.on('#box', 'touchstart', function () {
    console.log('touchstart');
});
​
// 长按 点击 双击
touch.on('#box', 'hold tap doubletap', function () {
    console.log('touchstart');
    console.log(this);
});

3、事件代理

• 格式：touch.on(element, types, selector, callback);

• callback中的this，即被代理的这个元素

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li class="abc">打豆豆</li>
</ul>
// touch.on(element, types, selector, callback);
​
touch.on('ul', 'tap', 'li', function () {
    // console.log(this);
    this.style.backgroundColor = 'red';
});
​
​
touch.on('ul', 'tap', '.abc', function () {
    // console.log(this);
    this.style.backgroundColor = 'red';
});

4、事件对象

// 不同的事件有不同的事件对象属性

touch.on('#box', 'swipe', function (ev) {
    // console.log(ev); // touch包装过的事件对象
    // console.log(ev.originEvent); // 返回原生的事件对象
​
    console.log('事件的名称：' + ev.type); // 事件的名称 
    console.log('旋转角度：' + ev.rotation); // 旋转角度
    console.log('缩放比例：' + ev.scale); // 缩放比例
    console.log('操作的方向属性：' + ev.direction); // 操作的方向属性
    console.log('操作的手势数量：' + ev.fingersCount); // 操作的手势数量
    console.log('相关位置信息：', ev.position); // 相关位置信息, 不同的操作产生不同的位置信息，它是一个对象
    console.log('swipe类两点之间的位移：' + ev.distance); // swipe类两点之间的位移
    console.log('x方向的位移值：' + ev.distanceX); // x手势事件x方向的位移值, 向左移动时为负数
    console.log('y方向的位移值：' + ev.distanceY); // 手势事件y方向的位移值, 向上移动时为负数
    console.log('旋转的角度：' + ev.angle); // rotate事件触发时旋转的角度
    console.log('时间戳：' + ev.duration); // touchstart 与 touchend之间的时间戳
});

5、手势事件

Touch.js的手势事件有很多，主要分为：缩放类、旋转类、滑动类、拖动类、长按和点击这么几类。