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

隨著HTML5的發(fā)展，為了支持對觸摸屏的操作，多個(gè)瀏覽器廠商都在自己的瀏覽器引擎中添加了很多支持touch的事件。但是由于W3C并沒有提供一個(gè)統(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本身由于各個(gè)不同版本之間存在的兼容性問題又有一些區(qū)別，常見的如IE7、IE8、IE9和IE10?；赪ebkit內(nèi)核的瀏覽器如Firefox、Safari、Chrome等都是常用的。這里需要注意的是，Safari提供一個(gè)Windows的Desktop版本，這個(gè)版本不同于Apple提供給它自己設(shè)備上的瀏覽器版本，所以在開發(fā)測試的時(shí)候需要區(qū)別開來。

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

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); }); 
} 

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

　　MSPOINTER_TYPE_TOUCH = 2

　　MSPOINTER_TYPE_PEN = 3

　　MSPOINTER_TYPE_MOUSE = 4

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

　　這里有幾個(gè)兼容性問題需要考慮：

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

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

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

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

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

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

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

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

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