day20JavaScript中的移动端事件，Touch

移动端

移动端问题

1. 由于浏览器的模拟器时好时坏，移动端一般不适用on来绑定事件, 用事件绑定的方式添加

2. pc端事件在移动端有300ms的延迟

3. 如果在移动端的元素下方还有一个元素，如果点击的时候，上层元素消失，这时点击事件会漂移到下层元素, 会触发点击事件

   避免此种布局

   按住时间超过300ms

var div = document.querySelector('div');

// 原生js  pc
// 由于浏览器的模拟器时好时坏，移动端一般不适用on来绑定事件, 用事件绑定的方式添加
// 不需要考虑兼容
div.onclick = function(){
    console.log(1);
}

div.addEventListener('click', function(){
    console.log(2);
});

// 移动端事件: touchstart touchmove touchend
// touchstart: 手指按下的时候触发
// touchmove: 手指按下 并且移动过程中
// touchend: 手指抬起的时候触发

// pc端事件在移动端有300ms的延迟 
div.addEventListener('touchstart', function(){
    console.log(3);
    div.style.display = 'none';
});

// 如果在移动端的元素下方还有一个元素，如果点击的时候，上层元素消失，这时点击事件会漂移到下层元素, 会触发点击事件
// 1. 避免此种布局
// 2. 按住时间超过300ms

移动端事件

1. touchstart: 手指按下的时候触发
2. touchmove: 手指按下 并且移动过程中
3. touchend: 手指抬起的时候触发

// 按下在元素内  滑动触发可以在整个屏幕
div.addEventListener('touchmove', function(){
    console.log(4);
});

// 按下在元素内  结束触发可以在整个屏幕
div.addEventListener('touchend', function(){
    console.log(5);
});
// pc端事件在移动端有300ms的延迟 
div.addEventListener('touchstart', function(){
    console.log(3);
    // div.style.display = 'none';
});

事件对象

var div = document.querySelector('div');
div.addEventListener('touchstart', function(evs){
    var ev = window.event || evs;
    console.log(ev);
    console.log(ev.touches); // 屏幕上的所有手指的列表
    console.log(ev.targetTouches); // 目标源的所有的手指列表
    console.log(ev.changedTouches); // 触发事件的手指的列表

    var tar = ev.changedTouches[0];
    console.log(tar);
    console.log(tar.identifier); // 手指标识
    console.log(tar.target); // 触发源
    console.log(tar.clientX, tar.clientY); // 相对于屏幕可视区域左上角的距离
    console.log(tar.pageX, tar.pageY); // 相对于页面左上角的距离
    console.log(tar.screenX, tar.screenY); // 相对于屏幕左上角的距离
    console.log(tar.force); // 压力大小
    console.log(tar.rotationAngle); // 旋转角度
    console.log(tar.radiusX, tar.radiusY); // 手指圆点的直径
});

Touch

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

事件绑定

touch.on(‘选择器’, ‘事件类型’, 事件处理函数);

// touch.on('选择器', '事件类型', 事件处理函数);
// 选择器: css中选择元素的方式

// tap: 单击
touch.on('div', 'tap', function(){
    console.log(2);
});

事件委托

// 1. 事件绑定
console.log(touch);
// touch.on('选择器', '事件类型', 事件处理函数);
// 选择器: css中选择元素的方式

// tap: 单击
touch.on('div', 'tap', function(){
    console.log(2);
});

// 给一个元素添加一个事件
// 给多个元素添加一个事件
touch.on('div,p', 'tap', function(){
    console.log(3);
});

// 添加多个事件
touch.on('div,p', 'hold doubletap', function(){
    console.log(4);
});

// 事件委托
// touch.on('父元素选择', '事件类型', '子元素选择器', 事件处理函数)
touch.on('ul', 'tap', 'li', function(){
    console.log(this.innerHTML);
});

事件对象

console.log(ev); // CustomEvent 客户端事件对象
console.log(ev.originEvent); // 原生js事件对象  TouchEvent
console.log(ev.type); // 事件类型
console.log(ev.fingersCount); // 手指数量
console.log(ev.position); // 距离定位父元素的距离
console.log(ev.rotation); // 旋转角度  touchstart: ev.startRotate();
console.log(ev.duration); // 时间长度
console.log(ev); // touch中的事件对象的属性 根据事件的不同会有不同的属性值
console.log(ev.angle); // 事件发生的时候转动的角度
console.log(ev.distance); // 滑动的距离
console.log(ev.distanceX); // x轴上移动的距离
console.log(ev.distanceY); // y轴上移动的距离
console.log(ev.direction); // 滑动的方向
console.log(ev.fingerStatus); // 手指状态  move end
console.log(ev.x, ev.y); // 滑动距离

事件

​ tap: 单击

​ doubletap: 双击

​ hold: 长按

​ rotate: 旋转

​ rotateleft: 左旋转

​ rotateright: 右旋转

​ swipe: 滑动

​ swipestart: 滑动开始

​ swipeend: 滑动结束

​ swiping: 滑动中

​ swipeleft: 左滑

​ swiperight: 右滑

​ swipeup: 上滑

​ swipedown: 下滑

​ drag: 拖拽

​ dragstart: 拖拽开始

​ dragend: 拖拽结束

touch.on('div', 'tap doubletap hold swipe swipestart swipeend swiping swipeleft swiperight swipeup swipedown drag dragstart dragend', function(ev){
    // console.log(ev.type);
});

// 1. 设置开始旋转事件
touch.on('div', 'touchstart', function(ev){
    ev.startRotate();
});

// 2. 添加旋转事件
touch.on('div', 'rotate rotateleft rotateright', function(ev){
    // console.log(ev.rotation);
    // console.log(ev.fingerStatus);
    console.log(ev.type);
});