移動端事件介紹

時間 2019-11-11

標籤移動事件介紹欄目無線简体版

原文原文鏈接

移動端事件介紹web

閱讀目錄api

一：理解click的300ms的延遲響應
二：手勢事件的介紹
三：觸摸事件的介紹
四：基本知識點
1.判斷是否爲iPhone數組

2.自動大寫與自動修正瀏覽器

3.禁止 iOS 彈出各類操做窗口微信

4. 禁止用戶選中文字函數

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

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

7. 判斷是否爲微信瀏覽器；spa
五：屏幕旋轉事件(onorientationchange)

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

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;
});