Microsoft Internet Explore 不支持css3 pointer-events:none; 提供了msElementFromPointer/msElementFromRect 方法

来源：互联网发布：张大大主持的网络节目编辑：程序博客网时间：2024/06/04 22:46
IE 10 开发者指南之文档对象模型

转载于： http://blogs.ejb.cc/archives/3128/ie-10-developers-guide-document-object-models
Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性，包括：高级点击测试API — Advanced Hit Testing APIsCSSOM 浮点值支持 — CSSOMFloating Point Value Support媒体查询监听器 — Media Query Listeners触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events注意：这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。高级点击测试APIIE10 和 Metro 风格应用中的文档对象模型 (DOM)都支持 elementFromPoint 方法，该方法返回某个视区（viewport）中位于坐标(X,Y)处的元素。这个方法对单一元素仍然有效，比如说点击页面上的某个图片。但是，对于游戏、图形编辑器之类使用多个图层的应用，点击屏幕，是无法获得相交于该点的所有东西的。IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法，这两个方法可以获得所有相交于指定的(X,Y)坐标或者矩形区域的所有元素，并返回节点列表。msElementsFromPoint 方法msElementsFromPoint 方法以某点的坐标 (X,Y)为参数，返回所有相交于该点的元素节点集合。. 该列表按 Z 顺序排序，这意味着第一个元素就是最顶层的元素。msElementsFromPoint(x, y)  返回某点 （X,Y）坐标之下的元素节点列表。下面的示例代码创建了一些重叠的不同颜色的 Div块。当你点击其中一个时， msElementsFromPoint 方法会得到点击处的所有元素，并将背景颜色变为灰色。由于所有的颜色都会被返回，其中包括 body 和 html，所以我们只改变 nodeName 是 div 的元素的背景色。<!DOCTYPE html ><html ><head>    <title>Hittest example</title>    <style type="text/css">      button      {        position:absolute;        top:600px;        left:20px;      }      div      {        display:block;        position:absolute;        border:2px solid black;        opacity:0.8;              }      #div1      {        background-color:Red;        left:200px;        top:200px;        height:200px;        width:300px;      }          #div2      {        background-color:Pink;        left:150px;        top:150px;        height:200px;        width:300px;      }          #div3      {        background-color:Green;        left:250px;        top:250px;        height:50px;        width:80px;      }      #div4      {        background-color:Yellow;        left:400px;        top:300px;        height:250px;        width:250px;      }      #div5      {        background-color:Purple;        left:275px;        top:100px;        height:500px;        width:20px;      }      #div6      {        background-color:Aqua;        left:200px;        top:175px;        height:50px;        width:400px;      }      #div7      {        background-color:Fuchsia;        left:430px;        top:100px;        height:375px;        width:30px;      }                  #div8      {        background-color:Lime;        left:175px;        top:290px;        height:40px;        width:450px;      }            </style></head><body>  <h1>getElementsFromPoint test</h1>    <button id="refresh" onclick="refresh();">Refresh</button>    <div id="div1"></div>    <div id="div2"></div>    <div id="div3"></div>    <div id="div4"></div>     <div id="div5"></div>    <div id="div6"></div>    <div id="div7"></div>    <div id="div8"></div><script type="text/javascript">    window.addEventListener("click", testHit, false);    function refresh()     {      window.location.reload(false);           //reload page    }    function testHit(e)     {      if (document.msElementsFromPoint)  //feature testing      {        var hitTargets = document.msElementsFromPoint(e.clientX, e.clientY);         // get elements from point                         for (var i = 0; i < hitTargets.length; i++)        {         if(hitTargets[i].nodeName.toUpperCase() == "DIV")         {           hitTargets[i].style.backgroundColor = "gray";          } //if it‘s a div, gray it out.                      }     }                  }</script></body></html>由于 msElementsFromPoint 返回所有相交于某点的元素，包括 html 等其他元素，代码中通过 nodeName 属性过滤出 div 元素。msElementsFromRect 方法msElementsFromRect 方法以一个方形区域为参数，返回所有相交于该区域的元素。这个方形区域由其左上角端点坐标和其宽、高来定义。其定义如下：msElementsFromRect(left,top,width, height);  返回以left、top、width和height定义的方形之下的元素数组。上面的例子只需要添加 width 和 height 就可以使用 msElementsFromRect 了。例如：function testHit(e) {   if (Document.msElementsFromRect) //feature testing    {      var hitTargets = document.msElementsFromRect(e.clientX - 25, e.clientY - 25, 50, 50);       // captures elements within 50px block       for (var i = 0; i < hitTargets.length; i++) {         if(hitTargets[i].nodeName.toUpperCase() == "DIV") {            hitTargets[i].style.backgroundColor = "gray";             }  //if it’s a div, gray it out.          }      }   }在这个更新的 testHit 函数中，当鼠标点击的时候，以点击点为左上角，宽度为50像的正方形下的所有元素都会被返回。