怎么理解Web前端開發(fā)中的Touch事件

這篇文章主要介紹“怎么理解Web前端開發(fā)中的Touch事件”，在日常操作中，相信很多人在怎么理解Web前端開發(fā)中的Touch事件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么理解Web前端開發(fā)中的Touch事件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

然而，開發(fā)支持觸摸屏的網(wǎng)頁與傳統(tǒng)意義上的網(wǎng)頁有很大的不同。就拿鼠標(biāo)hover事件來說，例如頁面上有一個表格，當(dāng)鼠標(biāo)指向表格的title時你希望在附近的某個地方顯示一個浮動的tooltip。當(dāng)然，你希望這個tooltip能更加引起瀏覽者的注意，因此你自定義了一個DIV元素并且通過JavaScript讓它動態(tài)顯示或隱藏。這個程序很簡單，并且在普通設(shè)備的多個不同版本的瀏覽器上都運行良好。但是如果你在支持觸摸屏的設(shè)備上瀏覽網(wǎng)頁的時候問題卻來了，設(shè)備不支持鼠標(biāo)，因此用戶無法用鼠標(biāo)來hover表格的title元素。用戶***能和網(wǎng)頁進行交互的設(shè)備就是用手指去觸摸或滑動屏幕，然而在一個非touch friendly的網(wǎng)頁上用手指去觸發(fā)傳統(tǒng)的mouse hover事件會顯得非常怪異，你會發(fā)現(xiàn)tooltip會在你手指接觸到屏幕的一瞬間顯示，而后馬上會消失。這是因為瀏覽器默認觸發(fā)了mouseover和mouseout兩個事件，而這兩個事件只是在手指接觸屏幕這一個操作中完成的，你根本沒有辦法去控制它。這只是許多不同中的一個小例子，還有很多不一樣的地方，如你在傳統(tǒng)設(shè)備上用鼠標(biāo)點擊一個圖片按鈕不動用來連續(xù)不停地滾動DIV，而在觸摸屏上瀏覽器會默認為你要顯示右鍵菜單而阻止了該事件繼續(xù)執(zhí)行。傳統(tǒng)設(shè)備上通常情況下同一時間里系統(tǒng)只允許一個鼠標(biāo)接受用戶的操作，而觸摸屏一般都支持多點觸摸甚至支持各種不同的手勢，如左右滑動、兩只放大縮小和旋轉(zhuǎn)等。

隨著HTML5的發(fā)展，為了支持對觸摸屏的操作，多個瀏覽器廠商都在自己的瀏覽器引擎中添加了很多支持touch的事件。但是由于W3C并沒有提供一個統(tǒng)一的標(biāo)準(zhǔn)，或者說該標(biāo)準(zhǔn)在不同的瀏覽器廠商中所遵循的情況也有很大區(qū)別，因此我們不得不針對瀏覽器版本做一些特殊的處理。這到讓我想起了IE瀏覽器在許多方面與其它瀏覽器的不同，這次也不例外！

這里有一些頁面介紹了在不同瀏覽器中對touch事件的支持，讀者可以看一下它們之間到底有哪些不同。

IE瀏覽器對touch事件的支持：http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

Firefox瀏覽器對touch事件的支持：https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events?redirectlocale=en-US&redirectslug=DOM%2FTouch_events

基本上有兩大陣營：IE瀏覽器和基于Webkit內(nèi)核的瀏覽器。

但是IE本身由于各個不同版本之間存在的兼容性問題又有一些區(qū)別，常見的如IE7、IE8、IE9和IE10?；赪ebkit內(nèi)核的瀏覽器如Firefox、Safari、Chrome等都是常用的。這里需要注意的是，Safari提供一個Windows的Desktop版本，這個版本不同于Apple提供給它自己設(shè)備上的瀏覽器版本，所以在開發(fā)測試的時候需要區(qū)別開來。

那么如何才能開發(fā)一個通用的支持touch事件的頁面呢？基本上，我們只需要區(qū)別IE和Webkit內(nèi)核的瀏覽器就行了，剩下的兼容性問題通常都比較好解決。MSDN的這個頁面介紹了IE對指針和筆勢事件的支持http://msdn.microsoft.com/zh-cn/library/ie/hh773557.aspx其中有講到如何檢測對指針事件的支持，我們可以利用該方法來區(qū)別IE和其它瀏覽器。看下面這個程序片段：

if (window.navigator.msPointerEnabled) {     /*Events for IE only*/   document.getElementById("id0").addEventListener("MSPointerOver", function (e) {         /*Add mouse over event for touch*/         if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {             methods.onMouseOver(this, e);         }     });    document.getElementById("id0").addEventListener("MSPointerOut", function (e) {         /*Add mouse out event for touch*/         if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {             methods.onMouseOut(this, e);         }     });   document.getElementById("id0").addEventListener("MSPointerDown", function (e) {         if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {             /*Do something for touch input only*/             methods.onTouchInput(this.parentNode);         }         else {             /*Do something for non-touch input*/             methods.onMouseClick(this.parentNode);         }     }); } else {     /*Events for non-IE or IE without msPointerEnabled*/     $(this).bind("touchstart", function (e) {         e.preventDefault();         methods.onMouseClick(this.parentNode);         methods.onMouseOver(this, e);     });     /*Common Mouse events: mouseover, mouseout, click*/     $(this).click(function () { methods.onMouseClick(this); });     $(this).hover(             function (e) {                 methods.onMouseOver(this, e);             },             function (e) { methods.onMouseOut(this, e); }); }

代碼有兩個主要的分支，針對IE和Webkit內(nèi)核的瀏覽器。在IE瀏覽器中，MSPointerDown事件不會自動阻止鼠標(biāo)事件，因此需要通過event.pointerType來判斷指針類型。event.pointerType是一個枚舉變量，一共有三個值：

MSPOINTER_TYPE_TOUCH = 2

MSPOINTER_TYPE_PEN = 3

MSPOINTER_TYPE_MOUSE = 4

很奇怪為什么沒有值為1的枚舉值？可能是用作保留了吧！這也就是說MSPointerDown事件在觸發(fā)的同時還會觸發(fā)鼠標(biāo)相關(guān)的事件，事實上鼠標(biāo)事件是最開始觸發(fā)的。因此我們需要先判斷指針類型，進行不同的處理。為了增加頁面的兼容性，讓其在支持鼠標(biāo)操作的設(shè)備上也能有更好的體驗，代碼中特意添加了MSPointerOver和MSPointerOut事件，并且判斷當(dāng)指針類型為MSPOINTER_TYPE_MOUSE時才去執(zhí)行對應(yīng)的鼠標(biāo)事件。

這里有幾個兼容性問題需要考慮：

1. Window.navigator.msPointerEnabled語句只會判斷瀏覽器是否支持MSPointer相關(guān)的事件，而不會判斷用戶的設(shè)備是否支持觸摸操作。目前只有在IE10上該對象不會返回undefined，其它版本的瀏覽器均視該對象不存在。如果你想判斷用戶的設(shè)備是否支持觸摸操作，應(yīng)該使用Window.navigator.msMaxTouchPoints，如果該對象存在并且返回的結(jié)果大于1，則表示設(shè)備支持觸摸操作并且是支持多點觸摸的。

2. 在IE中，MSPointer相關(guān)的事件只會在瀏覽器支持的時候被觸發(fā)，如果頁面元素同時還帶有鼠標(biāo)事件，則鼠標(biāo)事件也會被同時觸發(fā)。

3. Webkit內(nèi)核的瀏覽器支持touchstart事件，MSPointer相關(guān)的事件在這些瀏覽器上被視為無效。通過e.preventDefault()語句可以阻止鼠標(biāo)默認行為，從而不讓mouse hover事件觸發(fā)。

所以，上面代碼片段同時兼容了<IE10和IE10，以及兼容在IE10上的觸摸和鼠標(biāo)操作，和非IE內(nèi)核的瀏覽器上的觸摸和鼠標(biāo)操作。有一個情況未考慮，那就是<IE10情況下的觸摸操作，相信這種設(shè)備應(yīng)該很難見到吧！

當(dāng)然，你完全可以將鼠標(biāo)的Click事件當(dāng)作touch事件來處理，如果元素上除了Click之外沒有任何其它的事件。但是如果元素上還有mouse hover相關(guān)的事件，則用戶在touch的同時觸發(fā)mouse hover，在這種情況下你或許可以考慮使用上面的邏輯來處理cross events。

到此，關(guān)于“怎么理解Web前端開發(fā)中的Touch事件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>