一、手勢事件

下面二維碼是一個實例dome，可掃碼直接查看:

在ios系統中，系統自帶了gesture事件，兩個手指操作的時候，就會產生一下三種手勢事件：

gesturestart：當一個手指已經按在屏幕上，另一個手指又觸摸屏幕的時候觸發。
gesturechange：當觸摸屏幕的任何一個手指的位置發生變化的時候觸發。
gestureend：當任何一個手指從屏幕上面移開時觸發。

這裏通過js自定義事件模仿ios的手勢事件為Android添加相同的功能；

實現基本思路

在Android中我們可以監聽touchstart、touchmove、touchend去實現手勢事件的監聽，

實現方法

1、創建自定義事件

var gesturestart = new CustomEvent(‘gesturestart‘);
var gesturechange = new CustomEvent(‘gesturestart‘);
var gestureend = new CustomEvent(‘gesturestart‘
 
);

1、gesturestart

首先定義兩個變量存儲觸發狀態和起始點信息

var istouch = false;
ar start = [];

監聽touchstart事件，通過e.touches.length>2判斷是否多點觸控，如果是，觸發自定義事件gesturestart

document.addEventListener("touchstart", function(e) {
    if(e.touches.length >= 2) { //判斷是否有兩個點在屏幕上
        istouch = true;
        start = e.touches; //得到第一組兩個點
        e.target.dispatchEvent(gesturestart);
    };
}, false);

2、gesturechange

gesturechange事件中我們需在事件對象中返回以下兩個屬性：

• scale：表示兩個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始，並隨距離拉大而增長
• rotation：表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從零開始。
  對於兩點間的距離我們可由以下公式計算

（1）縮放比例可通過兩組點之間的長度比計算

　　　　scale = dis1 / dis2
首先編寫方法兩點之間距離的方法（勾股定理）

function getDistance(p1, p2) {
    var x = p2.pageX - p1.pageX,
        y = p2.pageY - p1.pageY;
    return Math.sqrt((x * x) + (y * y));
};

（2）對於旋轉角度第一組點的夾角與第二組點的夾角相減得到

　　　　deg= deg2-deg1 =arctan (x2-x1/y2-y1) - arctan (x4-x3/y4-y3) 　

編寫獲取夾角方法（反三角函數求夾角，註意弧度轉化為角度）

function getAngle(p1, p2) {
    var x = p1.pageX - p2.pageX,
        y = p1.pageY - p2.pageY;
    return Math.atan2(y, x) * 180 / Math.PI;
};

監聽touchmove事件，通過e.touches.length >= 2和istouch判斷是否觸發gesturechange事件

document.addEventListener("touchmove", function(e) {
    e.preventDefault();
    if(e.touches.length >= 2 && istouch) {
        var now = e.touches; //得到第二組觸點
        var scale = getDistance(now[0], now[1]) / getDistance(start[0], start[1]); //得到縮放比例
        var rotation = getAngle(now[0], now[1]) - getAngle(start[0], start[1]); //得到旋轉角度
        gesturechange.scale = scale.toFixed(2);
        gesturechange.rotation = rotation.toFixed(2);
        e.target.dispatchEvent(gesturechange);  
    };
}, false);

3、gestureend

監聽touchend事件，通過istouch判斷是否觸發gestureend 事件

document.addEventListener("touchend", function(e) {
    if(istouch) {
        istouch = false;
        e.target.dispatchEvent(gestureend);
    };
}, false);

4、系統環境判斷

function isAndroid(p1, p2) {
    var u = navigator.userAgent;
    return u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //是否android終端
};

封裝以上方法並執行，即可實現安卓端與ios的手勢事件兼容

^[1]: 部分代碼參考https://blog.csdn.net/qq_17757973/article/details/54604625

Android系統下用js自定義gesture事件（仿ios實現移動端事件一致）