移動端事件介紹

移動端事件介紹

閱讀目錄

• 一：理解click的300ms的延遲響應
• 二：手勢事件的介紹
• 三：觸摸事件的介紹
• 四：基本知識點

  1.判斷是否為iPhone

  2.自動大寫與自動修正

  3.禁止 iOS 彈出各種操作窗口

  4. 禁止用戶選中文字

  5. 關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

  6. Andriod 上去掉語音輸入按鈕

  7. 判斷是否為微信瀏覽器；

• 五：屏幕旋轉事件(onorientationchange)

回到頂部

一：理解click的300ms的延遲響應

    Click事件在移動手機開發中有300ms的延遲，因為在手機早期，瀏覽器系統有放大和縮放功能，用戶在屏幕上點擊兩次之后，系統會觸發放大或者縮放功能，因此系統做了一個處理，當觸摸一次后，在300ms這段時間內有沒有觸摸第二次，如果觸摸了第二次的話，說明是觸發放大或縮放功能，否則的話是click事件。因此當click時候，所有用戶必須等待於300ms后才會觸發click事件。所以當在移動端使用click事件的時候，會感覺到有300ms的遲鈍。

回到頂部

二：手勢事件的介紹

touchstart：當手指放在屏幕上觸發;

touchmove：當手指在屏幕上滑動時，連續地觸發;

touchend：當手指從屏幕上離開時觸發;

touchcancel： 當系統停止跟蹤時觸發; 該事件暫時使用不到;

由於觸摸會導致屏幕動來動去，所以我們可以在這些事件中函數內部使用 event.preventDefault()來阻止掉默認事件(默認滾動).

先看看頁面的demo；HTML代碼如下：

<div id="touch">touch</div>

JS如下：

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    }
};
var touch = document.getElementById("touch");
EventUtil.addHandler(touch,"touchstart",function(event){
    console.log(event);
})；

// 連續滑動觸發
EventUtil.addHandler(window,"touchmove",function(event){
    alert(1);
})；
//當手指從屏幕上離開時觸發;
EventUtil.addHandler(window,"touchend",function(event){
    alert(1);
})

如上代碼：在觸摸設備觸摸下，我們先來看看打印事件event如下：

觸摸屬性如下介紹：

touches: 表示當前跟蹤的觸摸操作的touch對象的數組。

當一個手指在觸屏上時，event.touches.length = 1; 當二個手指在觸屏上時，event.touches.length=2, 以此類推；

targetTouches: 特定於事件目標的touch對象的數組。touch事件會毛冒泡，所以我們可以使用這個屬性指出目標對象。如下代碼演示：

EventUtil.addHandler(touch,"touchstart",function(event){

       console.log(event.targetTouches);

})；

打印演示如下：

changedTouches: 表示上次觸摸以來發生了什么改變的touch對象的數組。

每個touch對象都包含了以下幾個屬性：

clientX 觸摸目標在視口中的X坐標。

clientY觸摸目標在視口中的Y坐標。

Identifier: 標示觸摸的唯一ID。

pageX 觸摸目標在頁面中的X坐標。

pageY 觸摸目標在頁面中的Y坐標。

screenX觸摸目標在屏幕中的X坐標。

screenY 觸摸目標在屏幕中的Y坐標。

target  觸摸的DOM節點目標。

如下代碼：

var touch = document.getElementById("touch");

EventUtil.addHandler(touch,"touchstart",function(event){

       console.log(event);

})；

如下截圖所示：

回到頂部

三：觸摸事件的介紹

Gestures

  這個事件針對IOS設備上的，一個Gestures事件在兩個或更多手指觸摸屏幕時觸發。如果任何手指你正在監聽的Gesture事件(gesturestart，gesturechange，gestureend)節點上，你將收到對應的gestures事件。

  Gesturestart：當一個手指已經按在屏幕上，而另一個手指又觸摸在屏幕時觸發。

  Gesturechange：當觸摸屏幕的任何一個手指的位置發生改變的時候觸發。

  Gestureend：當任何一個手指從屏幕上面移開時觸發。

觸摸事件和手勢事件的之間關系：

  當一個手指放在屏幕上時，會觸發touchstart事件，而另一個手指觸摸在屏幕上時觸發gesturestart事件，隨后觸發基於該手指的touchstart事件。

  如果一個或兩個手指在屏幕上滑動時，將會觸發gesturechange事件，但是只要有一個手指移開時候，則會觸發gestureend事件，緊接着會觸發touchend事件。

手勢的專有屬性：

  rotation: 表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從0開始；

  scale: 表示2個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始的，並隨距離拉大而增長。

回到頂部

四：基本知識點

1.判斷是否為iPhone

  Javasript代碼如下：

// 判斷是否為 iPhone ：
function isAppleMobile() {
    return (navigator.platform.indexOf('iPad') != -1);
};

2.自動大寫與自動修正

 要關閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項：

<input type="text" autocapitalize="off" autocorrect="off" />

3.禁止 iOS 彈出各種操作窗口

-webkit-touch-callout:none

4. 禁止用戶選中文字

-webkit-user-select:none

5. 關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

this.value = this.value.replace(/\u2006/g, '');

6. Andriod 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

7. 判斷是否為微信瀏覽器；

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

回到頂部

五：屏幕旋轉事件(onorientationchange)：

判斷屏幕是否旋轉的JS代碼如下：

function orientationChange() {
    switch(window.orientation) {
        case 0:
        alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
        case -90:
        alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
        case 90:
        alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
        case 180:
        alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
    };
};
// 添加測試監聽函數代碼如下：
addEventListener('load', function(){
    orientationChange();
window.onorientationchange = orientationChange;
});