ie10 事件

最新推荐文章于 2022-06-07 14:49:11 发布

唐菜也

最新推荐文章于 2022-06-07 14:49:11 发布

阅读量774

点赞数

本文链接：https://blog.csdn.net/yuzhitangxiangrong/article/details/72231324

版权

先给大家看一下目前跨浏览器的测试结果摘要：

从此图可以很明显的知道ie10对HTML5的支持程度是相当给力的，终于从托后腿的角色一跃成为标准的领航者。

另一方面对开发者的支持也是很给力，无论是线下的培训还是线上的资料（虽然很乱），都是非常多的。（资料地址在文章最后）

还有就是对于这个平台，win8的应用商店按照微软自己的说法是将有6.9亿的用户量，不管这个的水分有多少，至少知道他的用户是非常庞大的，而且从我个人对win8的使用情况来看，觉得win8的用户体验也是非常不错的，向下他兼容了基本所有win7的软件。向上他又有适合在移动平台使用的metro风格界面。

再看一下ie10的新特性之——事件：

先给大家看两个Demo（最好用触屏设备查看，如surface）

http://ie.microsoft.com/testdrive/Browser/BrowserSurface/

http://www.ibokanfamily.com/win8/gesturechange.html

这是微软官方提供的事件Demo

在ie10中事件分为pointer（指针）事件和gesture（手势）事件：

Pointer事件:

在使用 JavaScript 的 Windows 应用商店应用中，触摸、鼠标和笔/触笔交互是作为指针(pointer)输入进行接收、处理和管理的。

通过将鼠标、笔/触笔和触摸输入统一为抽象的指针输入，你可以独立于所使用的输入设备的类型处理用户与你的应用的交互,就是你使用的设备是平板，手机，还是Pc所触发的事件是一样的。

和鼠标事件类似，pointer事件会在点击，移动，释放，移进，移出的时候触发，主要有：

MSPointerDown——指针按下

MSPointerMove——指针移动

MSPointerUp——指针释放

MSPointerOver——指针移进

MSPointerOut——指针移除

关于事件绑定的方式跟其他事件的绑定方式是一样的：

1.在标签内部加事件属性：例：

<div onmspointerdown=”down()”></div>

2.在Js里通过事件绑定的方式：例：

Html:

<div id=”a”></div>

JS:

 var div=document.getElementById(“a”);//获取id名为a的元素div;

div.onmspointerdown=function (){ alert(‘a’);}//给变量div绑定函数

3.给元素添加事件监听器：例：

Html:

<div id=”a”></div>

JS:

var div=document.getElementById(“a”);//获取id名为a的元素div;

div.addEventListener(“MSPointerDown”,function (){},false);//给变量div添加事件监听

与鼠标不同的是，它可能在屏幕上有同时有多个点，例如，在多点触控的设备。这种情况下，多个独立的pointer事件会被触发，对应着屏幕的每一个点。当我们要对单独一个点进行处理，可以通过调用event.getPointerList()获得包含所有pointer的一个数组。

Ps:这里需要大家注意的是通过标签内插入和事件绑定的事件名称都是必须为小写，而给元素添加事件监听的事件名称里每个单词的首字母必须为大写。否则事件无效

Demo地址：http://www.ibokanfamily.com/WIN8/index.html

参考资料地址：http://technet.microsoft.com/zh-cn/ie/hh465383

Gesture事件：

手势是在输入设备（一个或多个手指（在触摸表面上）、笔/触笔数字化器、鼠标等）上或者通过这些设备进行的实际操作或运动。这些自然交互映射到系统和应用上的元素操作。

在说手势事件都有哪些之前，建议大家先看一下window8的触控准则，这方便大家了解ie10手势事件的由来：

触控准则地址：http://technet.microsoft.com/zh-cn/ie/hh465415

在ie10的手势主要有：

MSGestureTap ——点击

描述：检测到一个接触并立即抬起。在元素上点击将调用其主要操作。

MSGestureDoubleTap ——双击

描述：双击是两次连续的快速点击，可以根据应用的需要进行处理。

MSGestureHold——长按

描述：检测到一个接触而且不移动。

长按会导致显示详细信息或指导性可视化内容（如工具提示或上下文菜单），并且不允许执行操作。

以上手势为静态手势

动态手势，或者说复杂的手势：

MSGestureStart——手势开始

MSGestureChange ——手势改变

MSGestureEnd——手势结束

描述：这些事件包含了手势变换的信息，例如，移动，放大，旋转，加速率等

手势的使用：

1.创建手势对象：

在您的网站中处理手势的第一步是实例化手势对象。

var d=new MSGesture();//创建一个新的手势，必写项

2.接下来，为该手势提供一个目标元素。浏览器将对该元素触发手势事件。同时，该元素还可以确定事件的坐标空间:

var con=document.getElementById("con");

d.target=con;//必须要捕获目标，手势影响的目标是con

con.addEventListener("MSGestureChange",Listener,false);

3.最后，告知手势对象在手势识别期间处理哪些指针。

con.addEventListener("MSPointerDown",function (evt) {

       d.addPointer(evt.pointerId);

})

Ps:要给body标签加-ms-touch-action: none;样式来阻止默认触摸事件（平移、缩放）;

由于动态手势以转换的形式报告，因此使用包含 CSS 2D 转换的 MSGesture 来操作诸如照片或拼图等元素将变得十分轻松。可以通过下列方式启用缩放、旋转和拖动元素的操作：

var startMatrix = null;

function Listener(evt) {

       startMatrix = new MSCSSMatrix(evt.target.style.msTransform);

       var tx = evt.translationX;

       var ty = evt.translationY;

       con.style.msTransform = startMatrix.

       translate(tx,ty).

rotate(evt.rotation*180/Math.PI).

       scale(evt.scale);

}

完整代码：

<!doctype html>
<html>
<head>
    <title>MSGestureChange</title>
    <meta charset='utf-8' />
    <style type="text/css">
        body
         {
           -ms-touch-action: none;
         }
        #con{ width:200px; height:400px; background:#999;-ms-user-select: none;
            -ms-touch-action: none;
            -ms-content-zooming:none;
        }
    </style>
</head>

<body onload="load()">
    <div id="out">
        <div id="con">唐菜也</div>
    </div>
    <script type="text/javascript">
    <!--
        //在您的网站中处理手势的第一步是实例化手势对象。
        var d=new MSGesture();//创建一个新的手势，必写项
        /*
        *接下来，为该手势提供一个目标元素。浏览器将对该元素触发手势事件。
        *同时，该元素还可以确定事件的坐标空间.
        */
        var con=document.getElementById("con");
        d.target=con;//必须要捕获目标，手势影响的目标是con
        con.addEventListener("MSGestureChange",Listener,false);
        /*
        *最后，告知手势对象在手势识别期间处理哪些指针
        *要给body标签加-ms-touch-action: none;样式来阻止默认触摸事件（平移、缩放）
        */
        con.addEventListener("MSPointerDown",function (evt) {
            d.addPointer(evt.pointerId);
        });
        /*
        *由于动态手势以转换的形式报告，因此使用包含 CSS 2D 转换的 MSGesture 来操作诸如照片或拼图等元素将变得十分轻松。
        *可以通过下列方式启用缩放、旋转和拖动元素的操作
        */
        var startMatrix = null;
        function Listener(evt) {
            startMatrix = new MSCSSMatrix(evt.target.style.msTransform);
            var tx = evt.translationX;
            var ty = evt.translationY;
            con.style.msTransform = startMatrix.
                translate(tx,ty).
                rotate(evt.rotation*180/Math.PI).
                scale(evt.scale);
        }
    //-->
    </script>
</body>
</html>

DEMO地址：

http://www.ibokanfamily.com/win8/msgesturechange.html

参考资料地址：http://blogs.msdn.com/b/ie_cn/archive/2012/06/25/gesture-recognition.aspx

唐菜也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie10 事件

先给大家看一下目前跨浏览器的测试结果摘要：从此图可以很明显的知道ie10对HTML5的支持程度是相当给力的，终于从托后腿的角色一跃成为标准的领航者。另一方面对开发者的支持也是很给力，无论是线下的培训还是线上的资料（虽然很乱），都是非常多的。（资料地址在文章最后）还有就是对于这个平台，win8的应用商店按照微软自己的说法是将有6.9亿的用户量，不管这个的水分有多少，至少知道他的用户
复制链接

扫一扫