Web前端開發中的Touch事件

作者：Jaxu 2013-05-21 09:54:39

如今移動設備變得越來越流行，在提供便利性的同時，觸摸屏也使得用戶逐漸擺脫了對傳統鍵盤和鼠標操作的束縛，人機交互更加方便。這不僅體現在強大和多樣化的APP應用程序上，Web應用程序同樣也由于觸摸屏的興起而變得更加豐富多彩。例如在傳統設備上用戶利用鼠標（包括觸摸版）和鍵盤來操作網頁，放大圖片、拖拽元素、進行頁面滾動等等。一些常見的鼠標和鍵盤事件諸如mouseover、mouseout、mousemove、click、foucs、blur等為我們提供了很好的頁面交互操作，具體可以參考W3school。

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

隨著HTML5的發展，為了支持對觸摸屏的操作，多個瀏覽器廠商都在自己的瀏覽器引擎中添加了很多支持touch的事件。但是由于W3C并沒有提供一個統一的標準，或者說該標準在不同的瀏覽器廠商中所遵循的情況也有很大區別，因此我們不得不針對瀏覽器版本做一些特殊的處理。這到讓我想起了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內核的瀏覽器。

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

　　那么如何才能開發一個通用的支持touch事件的頁面呢？基本上，我們只需要區別IE和Webkit內核的瀏覽器就行了，剩下的兼容性問題通常都比較好解決。MSDN的這個頁面介紹了IE對指針和筆勢事件的支持http://msdn.microsoft.com/zh-cn/library/ie/hh673557.aspx其中有講到如何檢測對指針事件的支持，我們可以利用該方法來區別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內核的瀏覽器。在IE瀏覽器中，MSPointerDown事件不會自動阻止鼠標事件，因此需要通過event.pointerType來判斷指針類型。event.pointerType是一個枚舉變量，一共有三個值：

　　MSPOINTER_TYPE_TOUCH = 2

　　MSPOINTER_TYPE_PEN = 3

　　MSPOINTER_TYPE_MOUSE = 4

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

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

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

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

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

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

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

　　有關touch friendly webpage方面的開發還有許多值得研究的東西，畢竟觸摸屏的設備也是這兩年才興起的東西，況且Web應用程序無論是在開發成本還是跨平臺兼容性方面都要優于APP。另外，除了touch（觸摸），gestures（手勢）方面的操作也非常重用，畢竟你不希望用戶永遠都用一根手指來操作你的網頁吧。這里有一篇MSDN的文章介紹了如何在IE中使用手勢操作頁面，我會在稍后的文章中向大家介紹如何在頁面中添加gestures事件。

http://msdn.microsoft.com/en-us/library/windows/apps/jj150607.aspx

　　另外還想跟大家一起分享下pointer.js，它應該是目前做得比較好的一個兼容各個不同瀏覽器版本touch事件的框架，不過仍然還在完善中，測試時也發現在某些情況下事件無法正確觸發。GENARALIZED INPUT ON THE CROSS-DEVICE WEB這篇文章也值得學習。

原文鏈接：http://developer.51cto.com/art/201305/394749.htm

責任編輯：彭凡來源：博客園

Web前端