html5移动端手势事件

快来打我* 2022-07-28 10:50 266阅读 0赞

# 第1章 事件参照表 #

<table> 
 <thead> 
  <tr> 
   <th align="left">事件</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">on-hold</td> 
   <td align="left">长按事，长按的时间是500毫秒</td> 
  </tr> 
  <tr> 
   <td align="left">on-tap</td> 
   <td align="left">轻击，如果长按事件超过250毫秒，那就不是轻击了</td> 
  </tr> 
  <tr> 
   <td align="left">on-double-tap</td> 
   <td align="left">双击</td> 
  </tr> 
  <tr> 
   <td align="left">on-touch</td> 
   <td align="left">触摸，这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup</td> 
  </tr> 
  <tr> 
   <td align="left">on-release</td> 
   <td align="left">结束触摸</td> 
  </tr> 
  <tr> 
   <td align="left">on-drag</td> 
   <td align="left">拖拽，一直点击某个物体，并且手开始移动</td> 
  </tr> 
  <tr> 
   <td align="left">on-drag-up</td> 
   <td align="left">向上拖拽</td> 
  </tr> 
  <tr> 
   <td align="left">on-drag-right</td> 
   <td align="left">向右拖拽</td> 
  </tr> 
  <tr> 
   <td align="left">on-drag-down</td> 
   <td align="left">向下拖拽</td> 
  </tr> 
  <tr> 
   <td align="left">on-drag-left</td> 
   <td align="left">向左拖拽</td> 
  </tr> 
  <tr> 
   <td align="left">on-swipe</td> 
   <td align="left">滑动，可以是任意方向上的。而且也和on-drag类似，都有四个方向上单独的事件</td> 
  </tr> 
  <tr> 
   <td align="left">on-swipe-up</td> 
   <td align="left">向上滑动</td> 
  </tr> 
  <tr> 
   <td align="left">on-swipe-right</td> 
   <td align="left">向右滑动</td> 
  </tr> 
  <tr> 
   <td align="left">on-swipe-down</td> 
   <td align="left">向下滑动</td> 
  </tr> 
  <tr> 
   <td align="left">on-swipe-left</td> 
   <td align="left">向左滑动</td> 
  </tr> 
 </tbody> 
</table>

# 第2章 拖拽事件 #

## 2.1 概述 ##

HTML5提供专门的拖拽与拖放的API，以后实现这类效果就不必乱折腾了。但是，考虑到Opera浏览器似乎对此不感冒，在通用性上有待商榷，所以这里也就简单说一说。