Javascript的高級手勢如何使用

這篇文章主要介紹“Javascript的高級手勢如何使用”，在日常操作中，相信很多人在Javascript的高級手勢如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Javascript的高級手勢如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在IE10中新加入的對高級用戶輸入的識別支持，舉例說明：注冊一個點擊操作，通過一句addEventListener 就能夠知道當前用戶的點擊是哪種設備，是手指的點擊，是鼠標的單擊還是觸控筆的點擊（平板設備都會帶有觸控筆）

  在IE10中新加入的對高級用戶輸入的識別支持，舉例說明：注冊一個點擊操作，通過一句addEventListener 就能夠知道當前用戶的點擊是哪種設備，是手指的點擊，是鼠標的單擊還是觸控筆的點擊（平板設備都會帶有觸控筆）。

 <canvas id="MyCanvas"></canvas>

    <script>

        MyCanvas.addEventListener("MSPointerDown", MyBack, false);

        function MyBack(e) {

            alert(e.pointerType.toString());

        }

    </script>

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

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

addEventListener 添加的事件為 MSPointerDown

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

創(chuàng)建手勢對象

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

var myGesture = new MSGesture();

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

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

最后，告知手勢對象在手勢識別期間處理哪些指針。

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

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

myGesture.addPointer(evt.pointerId);

});

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

處理手勢事件

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

點擊

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

長按

長按手勢是指用戶使用一個手指觸摸屏幕，并保持片刻并抬起而不移動的操作。在長按交互期間，MSGestureHold 事件會針對手勢的各種狀態(tài)而多次觸發(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.

}

}

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

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

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

復制代碼

代碼如下:

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)等動態(tài)手勢可支持鼠標操作，具體可通過在旋轉(zhuǎn)鼠標滾輪的同時分別使用 CTRL 或 SHIFT 修飾鍵來實現(xiàn)。

到此，關(guān)于“Javascript的高級手勢如何使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>