浅谈Web前端开发中的Touch事件

如今移动设备变得越来越流行，在提供便利性的同时，触摸屏也使得用户逐渐摆脱了对传统键盘和鼠标操作的束缚，人机交互更加方便。这不仅体现在强大和多样化的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内核的浏览器如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这篇文章也值得学习。

本文转自Jaxu博客园博客，原文链接：http://www.cnblogs.com/jaxu/archive/2013/05/21/3089995.html，如需转载请自行联系原作者