javascript第十六天移动端事件和touch.js

移动端touch事件

1. 移动端touch事件

(1)     touchstart：触摸开始事件  当手指按在屏幕上的时候 触发事件

(2)     touchmove：触摸移动事件  当手指按在屏幕上 并 移动的时候 触发事件

(3)     touchend：触摸结束事件  当手指离开屏幕的时候 触发事件

(4)     在移动端中 添加事件 尽量不要使用on  on方式添加事件在移动端不稳定。推荐使用addEventListener  移动端不考虑兼容

1. Pc端事件和移动端事件的区别

(1)     Pc端的事件 在 移动端 也可以使用

(2)     区别

①    Pc端事件 在 移动端中使用 会出现300ms的延迟，因此在移动端中不能 使用pc端事件

1. 移动端事件存在的问题

(1)     移动端点透事件

①    当上层盒子点击隐藏之后 移动端的点击事件 就会穿透到下层盒子上，这种现象称之为点透事件。

②    当我们点击的时间超过300ms之后，就不会出现点透事件

1. 移动端的事件对象

(1)     元素.addEventListener(“事件类型”，function(形参){ 形参就是事件对象 })

(2)     移动端事件事件对象独有的属性

①    touches：当前屏幕上存在的所有手指的信息

②    targetTouches：当前触发事件的元素中 所包含的所有 手指的信息

③    changedTouches：当前触发事件的手指信息

(3)     changedTouches

①    changedTouches是一个伪数组，伪数组中的每一个数组项就是记录手指信息的对象

1. .         TouchList {0: Touch, length: 1}
   1. .         0: Touch {identifier: 0, target: div, screenX: 204, screenY: 276, cli        entX: 164, …}
   2. .         length: 1
   3. .         __proto__: TouchList

②    我们真正使用的是 changedTouches[0]

(4)     手指信息中的重要属性

①    clientX/clientY：当前手指位置到可视窗口左侧和顶部的距离

②    pageX/pageY：当前手指位置到页面左侧和顶部的距离

③    radiusX/radiusY：手指投影的横向和纵向的半径

④    rotationAngle：元素旋转角度

⑤    screenX/screexY：当前手指位置到屏幕左侧和顶部的距离

(5)     移动端 拖拽无缝轮播图

①    存入一组假图片，每次手指按在真0 的时候 就直接定位到假0， 手指按在假3上，就定位到真3，

②    Touchstart事件具有默认行为，就是用户在手指按下之后 可以随意拖拽，如果影响到了我们的效果 就需要阻止默认行为

Touch.js插件

1. 初识

(1)     由百度开发和维护

(2)     主要识给 移动设备 设计的  因此 只支持webkit内核的浏览器

1. Touch.js的事件绑定机制

(1)     事件绑定

①    用法：touch.on(要添加事件的元素,”事件类型”,function(){})

②    用法2（批量绑定事件）：
touch.on(要添加事件的元素 , ”事件类型1 类型2 ....” , function(){})

(2)     事件委托

①    用法：touch.on(要添加事件委托的父元素,”事件类型”,子元素选择器,function(){})

(3)     事件对象

①    Touch.on(绑定事件的元素，“事件类型”，function(ev){ })

②    形参ev就会接收到事件对象

③    事件对象中的重要属性

1)       originEvent：touch封装事件的原形的事件对象

2)       fingersCount：记录手指编号

3)       Position：记录手指的位置

4)       startRotate：是一个函数 作用是一个开关， 用来开启旋转， 如果没有调用这个方法，元素就不能旋转，如果调用了就可以旋转

5)       distanceX/distanceY：用来记录手指滑动过的横向和纵向距离的，是滑动类和拖拽类事件独有

6)        

1. Touch.js封装的事件

(1)     缩放类事件：pinchstart缩放手势起点、pinchend缩放手势终点、pinch缩放手势、pinchin收缩、pinchout放大

(2)     滑动类事件：swipestart滑动手势起点、swiping滑动中、swipeend滑动手势终点、swipeleft向左滑动、swiperight向右滑动、swipeup向上滑动、swipedown向下滑动、swipe滑动

(3)     旋转类事件：rotateleft向左旋转、rotateright向右旋转、rotate旋转

(4)     拖拽类事件：dragstart 拖动开始、drag拖动、dragend拖动结束

(5)     点击类事件：tap  doubletap  hold

①    如果想监听css动画的执行结束， 需要使用一个事件，animationend, 这个事件会在动画结束的时候 被触发

1. Touch.js事件实例