目有个交互需要实现手指滑动的交互, pc 端使用 mousedown,mousemove,mouseup 监听实现.
但在 iOS 设备上 mousemove 是不好监听的, 同类的方法是 touchstart,touchmove,touchend.
项目需求, 需要用到拖动事件. 由于不需要考虑 IE8 等低端浏览器的兼容性, 所以想到 html5 中的 drag 事件, 发现移动端 Android & iOS 并不支持 drag 事件. 现在让我们来介绍一下移动端的常用事件吧
一, click 点击事件
单击事件, 类似于 PC 端的 click, 但在移动端中, 连续 click 的触发有 200ms ~ 300ms 的延迟.
二, touch 触摸事件
触摸事件, 有 touchstart touchmove touchend touchcancel 四种之分, 常用的有:
touchstart: 手指触摸到屏幕会触发
touchmove: 当手指在屏幕上移动时, 会触发
touchend: 当手指离开屏幕时, 会触发
touchcancel: 可由系统进行的触发(不常用事件), 比如手指触摸屏幕的时候, 突然 alert 了一下, 或者系统中其他打断了 touch 的行为, 则可以触发该事件.
2.1 事件列表
上面的三个触摸事件每个事件都有以下列表
changedTouches: 保存了所有引发事件的手指信息
targetTouches: 保存了当前对象上所有触摸点的列表;
touches: 保存了当前所有触碰屏幕的手指信息
2.1.1 事件属性(只读属性)
每个事件有列表, 每个事件列表还有以下属性
- pageX // 相对于页面的 X 坐标, 与 clientX 不同的是, 他包括左边滚动的距离, 如果有的话.
- pageY // 相对于页面的 Y 坐标, 与 clientY 不同的是, 他包括上边滚动的距离, 如果有的话.
- clientX // 相对于视区的 X 坐标
- clientY // 相对于视区的 Y 坐标
- screenX // 相对于屏幕的 X 坐标
- screenY // 相对于屏幕的 Y 坐标
- identifier // 当前触摸点的惟一编号
- target // 手指所触摸的 DOM 元素
- Touch.radiusX // 能够包围用户和触摸平面的接触面的最小椭圆的水平轴 (X 轴) 半径. 这个值的单位和 screenX 相同. 只读属性.
- Touch.radiusY // 能够包围用户和触摸平面的接触面的最小椭圆的垂直轴 (Y 轴) 半径. 这个值的单位和 screenY 相同. 只读属性.
- Touch.rotationAngle // 它是这样一个角度值: 由 radiusX 和 radiusY 描述的正方向的椭圆, 需要通过顺时针旋转这个角度值, 才能最精确地覆盖住用户和触摸平面的接触面. 只读属性.
- Touch.force // 手指挤压触摸平面的压力大小, 从 0.0(没有压力)到 1.0(最大压力)的浮点数. 只读属性.
比如: 想获取手指拖动滑动的坐标位置, 直接使用 event.clientX 是不起作用的, 要使用 event.changedTouches[0].clientX 才好,
如果是 jQuery 的 event 对象, 使用 event.originalEvent.changedTouches[0].clientX.
调用事件方法:
(1)jQuery 方法:$(document).bind("touchend", function(e){});
(2)JavaScript 方法: document.addEventListener("touchend",function(e){});
三, tap 类触碰事件
触碰事件, 我目前还不知道它和 touch 的区别, 一般用于代替 click 事件, 有 tap longTap singleTap doubleTap 四种之分, 有时会用 tap 代替 click 事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
四, swipe 滑动事件
滑动事件, 有 swipe swipeLeft swipeRight swipeUp swipeDown 五种之分
swipe: 手指在屏幕上滑动时会触发
swipeLeft: 手指在屏幕上向左滑动时会触发
swipeRight: 手指在屏幕上向右滑动时会触发
swipeUp: 手指在屏幕上向上滑动时会触发
swipeDown: 手指在屏幕上向下滑动时会触发
五, gesture 手势事件
当两个手指触摸屏幕时就会产生手势, 手势通常会改变显示项的大小, 或者旋转显示项. 有三个手势事件, 分别如下.
gesturestart: 当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发.
gesturechange: 当触摸屏幕的任何一个手指的位置发生变化时触发.
gestureend: 当任何一个手指从屏幕上面移开时触发.
来源: http://www.bubuko.com/infodetail-3096844.html