古风君子以泽,大主宰

主頁 > 知識(shí)庫 > Javascript 高級(jí)手勢(shì)使用介紹

Javascript 高級(jí)手勢(shì)使用介紹

在IE10中新加入的對(duì)高級(jí)用戶輸入的識(shí)別支持，舉例說明：注冊(cè)一個(gè)點(diǎn)擊操作，通過一句addEventListener 就能夠知道當(dāng)前用戶的點(diǎn)擊是哪種設(shè)備，是手指的點(diǎn)擊，是鼠標(biāo)的單擊還是觸控筆的點(diǎn)擊（平板設(shè)備都會(huì)帶有觸控筆）。

<canvas id="MyCanvas"></canvas>
    <script>
        MyCanvas.addEventListener("MSPointerDown", MyBack, false);
        function MyBack(e) {
            alert(e.pointerType.toString());
        }
    </script>

以上這段代碼就是能夠識(shí)別出當(dāng)前用戶的點(diǎn)擊是哪種設(shè)備，通過回調(diào)的方法中 e.pointerType 還進(jìn)行判斷。鼠標(biāo)是4，觸控筆是3，手指是2。至于值為1是何種設(shè)備還有待研究。

還有需要注意的就是想在javascript中添加對(duì)輸入設(shè)備的識(shí)別，注冊(cè)的方法事件也是有點(diǎn)點(diǎn)區(qū)別。

addEventListener 添加的事件為 MSPointerDown

而在IE10中對(duì)于這樣的多種設(shè)備識(shí)別中優(yōu)先處理的手指的點(diǎn)擊，前提是不影響功能正常單擊的情況下。然而IE10不僅僅能識(shí)別用戶的輸入設(shè)備還支持非常多的高級(jí)手勢(shì)

以下為IE10高級(jí)手勢(shì)支持的演示

創(chuàng)建手勢(shì)對(duì)象

在您的網(wǎng)站中處理手勢(shì)的第一步是實(shí)例化手勢(shì)對(duì)象。

var myGesture = new MSGesture();

接下來，為該手勢(shì)提供一個(gè)目標(biāo)元素。瀏覽器將對(duì)該元素觸發(fā)手勢(shì)事件。同時(shí)，該元素還可以確定事件的坐標(biāo)空間。

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

最后，告知手勢(shì)對(duì)象在手勢(shì)識(shí)別期間處理哪些指針。

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

注意：請(qǐng)不要忘記您需要使用 –ms-touch-action 來配置元素以防止其執(zhí)行默認(rèn)觸摸操作（例如，平移和縮放），并為輸入提供指針事件。

處理手勢(shì)事件

一旦手勢(shì)對(duì)象具有有效目標(biāo)并至少添加了一個(gè)指針，則其將開始觸發(fā)手勢(shì)事件。手勢(shì)事件可分為兩種：靜態(tài)手勢(shì)（例如，點(diǎn)擊或保持）和動(dòng)態(tài)手勢(shì)（例如，收縮、旋轉(zhuǎn)和輕掃）。

點(diǎn)擊

最基本的手勢(shì)識(shí)別是點(diǎn)擊。當(dāng)檢測(cè)到點(diǎn)擊時(shí)，將會(huì)在手勢(shì)對(duì)象的目標(biāo)元素觸發(fā) MSGestureTap 事件。不同于單擊事件，點(diǎn)擊手勢(shì)只能在用戶觸摸、按鼠標(biāo)按鈕或使用手寫筆觸控而不移動(dòng)時(shí)觸發(fā)。如果您要區(qū)分用戶點(diǎn)擊元素和拖動(dòng)元素的操作，這一點(diǎn)通常會(huì)顯得十分有用。

長按

長按手勢(shì)是指用戶使用一個(gè)手指觸摸屏幕，并保持片刻并抬起而不移動(dòng)的操作。在長按交互期間，MSGestureHold 事件會(huì)針對(duì)手勢(shì)的各種狀態(tài)而多次觸發(fā)：

復(fù)制代碼

代碼如下:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}

動(dòng)態(tài)手勢(shì)（收縮、旋轉(zhuǎn)、輕掃和拖動(dòng)）

動(dòng)態(tài)手勢(shì)（例如，收縮或旋轉(zhuǎn)）將以轉(zhuǎn)換的形式報(bào)告，這與 CSS 2D 轉(zhuǎn)換頗為類似。動(dòng)態(tài)手勢(shì)可觸發(fā)三種事件：MSGestureStart、MSGestureChange（隨著手勢(shì)的持續(xù)而重復(fù)觸發(fā)）和 MSGestureEnd。每個(gè)事件都包含縮放（收縮）、旋轉(zhuǎn)、轉(zhuǎn)換和速度等相關(guān)信息。

由于動(dòng)態(tài)手勢(shì)以轉(zhuǎn)換的形式報(bào)告，因此使用包含 CSS 2D 轉(zhuǎn)換的 MSGesture 來操作諸如照片或拼圖等元素將變得十分輕松。例如，您可以通過下列方式啟用縮放、旋轉(zhuǎn)和拖動(dòng)元素的操作：

復(fù)制代碼

代碼如下:

targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}

縮放和旋轉(zhuǎn)等動(dòng)態(tài)手勢(shì)可支持鼠標(biāo)操作，具體可通過在旋轉(zhuǎn)鼠標(biāo)滾輪的同時(shí)分別使用 CTRL 或 SHIFT 修飾鍵來實(shí)現(xiàn)。

標(biāo)簽：山南陜西黃石公主嶺黃石平頂山南平

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Javascript 高級(jí)手勢(shì)使用介紹》，本文關(guān)鍵詞 Javascript,高級(jí),手勢(shì),使用,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。