Javascript高級(jí)手勢(shì)如何使用

本文小編為大家詳細(xì)介紹“Javascript高級(jí)手勢(shì)如何使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Javascript高級(jí)手勢(shì)如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

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

 < canvas  id =“ MyCanvas” > </ canvas >

    <腳本>

        MyCanvas.addEventListener（“ MSPointerDown ” ，MyBack，  false ）;

        函數(shù) MyBack（e）{

            alert（e.pointerType.toString（））;

        }

    </腳本>

 超過(guò)這段代碼就是能夠識(shí)別出當(dāng)前用戶的點(diǎn)擊是設(shè)備，通過(guò)另一種方法中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)擊，則是不影響功能正常提示的情況下。而IE 10不僅僅能識(shí)別用戶的輸入設(shè)備還支持非常多的高級(jí)手勢(shì)

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

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

var myGesture = new MSGesture();

接下來(lái)，為該手勢(shì)提供一個(gè)目標(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)不要忘記您需要使用&ndash;ms-touch-action來(lái)配置元素以防止其執(zhí)行重置觸摸操作（例如，平移和縮放），并為輸入提供指針事件。

處理手勢(shì)事件

一旦手勢(shì)對(duì)象具有有效目標(biāo)并至少添加了一個(gè)指針，則其將開(kāi)始觸發(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)按鈕或使用手寫(xiě)筆觸摸而不移動(dòng)時(shí)觸發(fā)。如果您要區(qū)分用戶點(diǎn)擊元素和預(yù)先元素的操作，這一點(diǎn)通常會(huì)引起非常有用。

長(zhǎng)按

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

復(fù)制代碼代碼如下： www.mb5u.com

element.addEventListener（“ MSGestureHold”，handleHold）;

function handleHold（evt）{

if（evt.detail＆evt.MSGESTURE_FLAG_BEGIN）{

//開(kāi)始表示手勢(shì)開(kāi)始。對(duì)于保持姿勢(shì)，這意味著用戶已經(jīng)持有足夠長(zhǎng)的時(shí)間到位手勢(shì)將成為一個(gè)完整的PR如果手指抬起ESS和保持。

}

if（evt.detail＆evt.MSGESTURE_FLAG_END）{

//結(jié)束表示手勢(shì)結(jié)束。

}

if（evt.detail＆evt.MSGESTURE_FLAG_CANCEL）{

//取消表示用戶開(kāi)始手勢(shì)但取消了手勢(shì)。為了保持，當(dāng)用戶在舉起之前將其拖開(kāi)時(shí)，會(huì)發(fā)生這種情況。該標(biāo)志與“結(jié)束”標(biāo)志一起發(fā)送，表示手勢(shì)識(shí)別已完成。

}

}

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

動(dòng)態(tài)手勢(shì)（例如，收縮或旋轉(zhuǎn)）將以轉(zhuǎn)換的形式報(bào)告，這與CSS 2D轉(zhuǎn)換頗為類似。動(dòng)態(tài)手勢(shì)可觸發(fā)此類事件：MSGestureStart，MSGestureChange（觸摸的持續(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來(lái)操作諸如照片或拼圖等元素將變得非常輕松。例如，您可以通過(guò)以下方式啟用縮放，旋轉(zhuǎn)和重置元素的操作：

復(fù)制代碼代碼如下： www.mb5u.com

targetElement.addEventListener（“ MSGestureChange”，handlerElement）;

函數(shù)handleElement（e）{

//如果要禁用動(dòng)態(tài)手勢(shì)識(shí)別提供的內(nèi)置慣性，請(qǐng)取消注釋以下代碼

// if（e.detail == e.MSGESTURE_FLAG_INERTIA）

// return;

var m = new MSCSSMatrix（e.target.style.transform）; //在元素上獲取最新的CSS變換

e.target.style.transform = m

.translate（e.offsetX，e.offsetY）//將變換原點(diǎn)移動(dòng)到手勢(shì)的中心

下方.rotate（e.rotation * 180 / Math.PI）//應(yīng)用旋轉(zhuǎn)

.scale（e.scale）//應(yīng)用比例

.translate（e.translationX，e.translationY）//應(yīng)用平移

.translate（-e.offsetX，-e.offsetY）; //將轉(zhuǎn)換原點(diǎn)移回

}

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

讀到這里，這篇“Javascript高級(jí)手勢(shì)如何使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。