javaScript系列---【移动端事件--touch.js知识点总结】
1、移动端事件
移动端常用的事件,主要有三个,分别是:
-
ontouchstart(手指按下)
-
-
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的手势事件有很多,主要分为:缩放类、旋转类、滑动类、拖动类、长按和点击这么几类。