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

隨著HTML5的發(fā)展，為了支持對觸摸屏的操作，多個瀏覽器廠商都在自己的瀏覽器引擎中添加了很多支持touch的事件。但是由于W3C并沒有提供一個統(tǒng)一的標準，或者說該標準在不同的瀏覽器廠商中所遵循的情況也有很大區(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/hh673557.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事件不會自動阻止鼠標事件，因此需要通過event.pointerType來判斷指針類型。event.pointerType是一個枚舉變量，一共有三個值：

　　MSPOINTER_TYPE_TOUCH = 2

　　MSPOINTER_TYPE_PEN = 3

　　MSPOINTER_TYPE_MOUSE = 4

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

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

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

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

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

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

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

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

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

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

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