IE10触屏和手势事件监听

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/5/14

MSPointerDown

类似mousedown,兼容触屏和鼠标操作


MSGestureTap

类似onclick,与MSPointerDown区别在于是否有鼠标和手指释放的一下,否则不会触发


MSGestureHold

用于监听鼠标或手指按住对象2s


MSGestureChange

监听鼠标或手指拖动对象,这个事件在拖动期间会被不断触发


MSGestureEnd

类似mouseup,兼容触屏和鼠标操作


MSPointerCancel

与MSGestureEnd的区别在于,这个事件必须要被一些系统性的事件阻断才会触发。例如在拖动对象时,有ALERT框弹出。


如何判断是鼠标还是触屏?

在事件返回的handle中,可以根据pointerType属性判断操作类型


有mouse、pen、touch 3种,假如没有需要区分操作类型的需求。理论上,IE10可以完美兼容鼠标和触屏交互操作。


如何实现一些缩放、旋转、拖动交互?

这些操作都需要依赖MSGestureChange来实现,关键点是如何获取鼠标或手指在对象上操作时的一些参数,例如手指拖动的方向、位移、加速度,甚至是双指或多指同时操作时的参数。

同样是在事件handle上可以获得:

  • translationX 基于X轴的位移

  • translationY 基于Y轴的位移

  • rotate 旋转的度数

  • scale 缩放的倍数

通过不断的获得这些参数,相应的修改对象的CSS3 transform,便可以实现一些常见的效果。


是否有更简单的使用办法?

在IE10下,实现图片放大缩小和图片幻灯片这两种常见交互,通过CSS就可以简单实现。

-ms-content-zooming : zoom;

-ms-content-zoom-limit-min: 100%; //最小缩放倍数

-ms-content-zoom-limit-max: 500%; //最大缩放倍数


-ms-scroll-snap-type: mandatory; //允许snap

-ms-scroll-snap-points-x: snapInterval(0%, 100%); //每次snap的距离


总结

IE10可以说是微软在移动端的翻身之作,IE9一直被诟病对CSS3和HTML5支持不足。现在看来,IE10比起现在许多手机webkit内核的浏览器,功能和性能都要强不少。

同时还因为win8是把传统操作和平板操作兼容的这么一个概念,使得IE10也是在这个概念上定位,也有许多针对win8的私有属性。

win8端的web app开发缺点和优点同样明显,IE10的支持为应用带来巨大性能和效率的提升,体验更接近原生应用。但是由于太多私有属性和针对win8的特殊化,导致WIN8的应用虽然可以使用web语言开发但是却并不夸平台!

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/1088.html