在移動端開發中，現有的手勢事件只有ios上的瀏覽器支援，因此對其他裝置上的瀏覽器手勢事件我們必須在移動端的touchstart、toucmove、touchend事件上進行改造公升級，下面就介紹下公升級改造的移動端的手勢事件。
移動端觸控事件(基礎事件)
touchstart— 觸控開始
touchmove— 觸控移動
touchend— 觸控結束
touchcancel— 觸控中斷(在觸控過程中被打斷，如彈框)
box.addeventlistener('touchmove',function (event)
var startx = event.touches[0].clientx; //觸點在視口上的位置
手勢事件
ios的手勢事件
1.1 事件
gesturestart—手勢開始，手指觸碰當前元素，螢幕上有兩個或者兩個以上的手指
gesturechange—手勢變化，手指觸碰當前元素，螢幕上有兩個或者兩個以上的手指位置在發生移動
gestureend—手勢結束，在gesturestart後, 螢幕上只剩下兩根以下(不包括兩根)的手指
1.2 touchevent 新增的屬性
scale 觸點的距離與觸點初始距離的比例
rotation 觸點的角度差與初始角度差的差
box.addeventlistener('gesturechange', function(event))(window);
使用案例-實現元素縮放及旋轉
元素縮放及旋轉
margin:0;
padding:0;
width: 100%;
height: 100%;
overflow: hidden;
#box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 150px;
background-color: #f90;
**transformcss.js**可檢視筆者的'transform函式'文章**
(function () {
//獲取元素
var box = document.queryselector('#box');
//阻止瀏覽器預設行為
event.preventdefault();
gesture(box, {
start: function(){
//記錄開始手勢的時候，此時元素的縮放比例
box.startscale = transformcss(box, 'scale'); //預設為1
//計算開始手勢的時候，此時元素的初始旋轉角度
box.startrotate = transformcss(box, 'rotate'); //預設為0
change: function(event){
//實現縮放
transformcss(box, 'scale', box.startscale * event.scale);
//實現旋轉
transformcss(box, 'rotate', box.startrotate + event.rotation)
簡單的多點觸控手勢演算法
簡單的多點觸控手勢演算法 1.zoom動作 1 檢測到雙指down事件，記錄此時雙指間的距離為olddistant 2 當雙指移動時，實時計算雙指間的距離sampledistant 3 計算出縮放比例 zoom sampledistant olddistant 4 重複第2，3步直到up事件發生。2...
windows觸控手勢
觸控板手勢 簡而言之，在這篇文章裡，觸控手勢1到4可以在任何一種觸控板上使用，而手勢5到8則需要精確觸控板。1.拖拽 要模擬滑鼠的拖拽功能，只需要將乙個手指在某個專案上輕輕的雙擊一下，然後就可以拖拽它了。當拖拽到需要的位置時抬起指尖，就可以把這個專案放置到所在的地方。2.滾屏 3.縮放 要模擬在大多...
在 Mac 上使用多點觸控手勢
使用多點觸控觸控板或妙控滑鼠，您可以通過輕點 輕掃 捏合或開合一根或多根手指進行有用的操作。有關這些手勢的更多資訊，請選取蘋果選單 系統偏好設定 然後點按 觸控板 您可以關閉某個手勢，更改手勢型別，以及了解哪些手勢可在您的 mac 上使用。輕點來點按 用單指輕點來進行點按。輔助點按 右鍵點按 用雙指...