touch.js手機(jī)端的操作手勢(shì)
基本事件：
touchstart? //手指剛接觸屏幕時(shí)觸發(fā)
touchmove????//手指在屏幕上移動(dòng)時(shí)觸發(fā)
touchend?????//手指從屏幕上移開時(shí)觸發(fā)
touchcancel??//觸摸過(guò)程被系統(tǒng)取消時(shí)觸發(fā)（少用）
一、事件綁定
touch.on(element,types,callback);
參數(shù)描述：
element ? element或string ? ?元素對(duì)象、選擇器
types ?string 事件的類型（多為手勢(shì)事件），可接受多個(gè)事件以空格分開；支持原生事件的透?jìng)?br>
callback ? ?function ?事件處理函數(shù), 移除函數(shù)與綁定函數(shù)必須為同一引用;
二、部分手勢(shì)事件
1、縮放
pinchstart縮放手勢(shì)起點(diǎn)
pinchend縮放手勢(shì)終點(diǎn)
pinch縮放手勢(shì)
pinchin收縮
pinchout放大
2、旋轉(zhuǎn)
rotateleft向左旋轉(zhuǎn)
rotateright向右旋轉(zhuǎn)
rotate旋轉(zhuǎn)
3、滑動(dòng)
swipestart滑動(dòng)手勢(shì)起點(diǎn)
swiping滑動(dòng)中
swipeend滑動(dòng)手勢(shì)終點(diǎn)
swipeleft向左滑動(dòng)
swiperight向右滑動(dòng)
swipeup向上滑動(dòng)
swipedown向下滑動(dòng)
swipe滑動(dòng)
4、拖動(dòng)
拖動(dòng)開始 ? ?dragstart拖動(dòng)屏幕
拖動(dòng) ? ? ? ? ? drag拖動(dòng)手勢(shì)
拖動(dòng)結(jié)束 ? ? dragend拖動(dòng)屏幕
5、長(zhǎng)按
hold ? ?長(zhǎng)按屏幕
6、敲擊
tap單擊屏幕
doubletap雙擊屏幕
三、部分事件處理函數(shù)
originEvent觸發(fā)某事件的原生對(duì)象
type事件的名稱
rotation旋轉(zhuǎn)角度
scale縮放比例
direction操作的方向?qū)傩?/p>
fingersCount操作的手勢(shì)數(shù)量
position相關(guān)位置信息, 不同的操作產(chǎn)生不同的位置信息
distance ? ? ? ? ? ? ? swipe類兩點(diǎn)之間的位移
distanceX, x ? ? ? ? ? 手勢(shì)事件x方向的位移值, 向左移動(dòng)時(shí)為負(fù)數(shù)
distanceY, y ? ? ? ? ?手勢(shì)事件y方向的位移值, 向上移動(dòng)時(shí)為負(fù)數(shù)
angle ? ? ? ? ? ?rotate事件觸發(fā)時(shí)旋轉(zhuǎn)的角度
duration ? ? ? ? ? ? ? ? ?touchstart 與 touchend之間的時(shí)間戳
factor ? ? ? ? ? ? swipe事件加速度因子
startRotate啟動(dòng)單指旋轉(zhuǎn)方法，在某個(gè)元素的touchstart觸發(fā)時(shí)調(diào)用
四、練習(xí)
<script? ? src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
<body>
<div id="playarea">
<img ? ? id="target"draggable="false" ? ?src="img/cloud.png" ? ? class="show">
</div>
</body>
》單擊tap,雙擊doubletap,長(zhǎng)按hold
touch.on('#target', 'hold tap doubletap', function(ev){? }//多個(gè)手勢(shì)同個(gè)效果，用空格隔開即可
五、事件配置
六、
