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的手势事件有很多,主要分为:缩放类、旋转类、滑动类、拖动类、长按和点击这么几类。

 

 

posted on 2021-04-12 21:46  码农小小海  阅读(1045)  评论(0编辑  收藏  举报

导航