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

最新推荐文章于 2024-03-09 21:02:00 发布

xiaofengxiaoling

最新推荐文章于 2024-03-09 21:02:00 发布

阅读量4.3k

点赞数

分类专栏： java

java 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

IE 10 开发者指南之文档对象模型

转载于： http://blogs.ejb.cc/archives/3128/ie-10-developers-guide-document-object-models

Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性，包括：

高级点击测试API — Advanced Hit Testing APIs
CSSOM 浮点值支持 — CSSOMFloating Point Value Support
媒体查询监听器 — Media Query Listeners
触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events
注意：这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。

高级点击测试API
IE10 和 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" οnclick="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像的正方形下的所有元素都会被返回。

xiaofengxiaoling

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Microsoft Internet Explore 不支持css3 pointer-events:none; 提供了msElementFromPointer/msElementFromRect 方法

IE 10 开发者指南之文档对象模型转载于： http://blogs.ejb.cc/archives/3128/ie-10-developers-guide-document-object-modelsWindows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性，包括：高级点击测试API — Advanced Hit Testing
复制链接

扫一扫