Prueba de posicionamiento avanzada

Durante un tiempo, Document Object Model (DOM) en Windows Internet Explorer admitió el método elementFromPoint (que se presentó en el módulo de vista CSSOM del World Wide Web Consortium (W3C)). (Las aplicaciones de la Tienda Windows con JavaScript también admiten el método elementFromPoint). El método elementFromPoint devuelve el elemento que está en una coordenada x, e y, en una ventanilla. Esto funciona bien para elementos únicos como hacer clic en una imagen de una página. Sin embargo, para juegos, editores gráficos y otras aplicaciones que puedan usar varias capas, no es posible obtener todo lo que forma intersección con un punto concreto de la pantalla usando el método elementFromPoint.

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript presentan los métodos msElementsFromPoint y msElementsFromRect, que devuelven una lista de nodos de todos los elementos que forman intersección con el punto en las coordenadas x, e y, concretas de un área rectangular, respectivamente.

Este tema contiene las siguientes secciones:

El método msElementsFromPoint

El método msElementsFromPoint toma las coordenadas x e y de un punto y devuelve una lista de nodos de los elementos que forman intersección con el punto. La lista está ordenada por z, donde el primer elemento encabeza la lista.

MétodoDescripción

msElementsFromPoint(x, y)

Devuelve una NodeList de elementos que están en un punto definido por x e y.

 

La siguiente muestra de código crea una serie de bloques div superpuestos de diversos colores. Cuando haces clic en uno, usa el método msElementsFromPoint para obtener todos los elementos mediante la posición de clic y cambia el color de fondo a gris. Como se devuelve una lista con todos los elementos, incluidos body e html, cambiamos el color de fondo solo en los elementos cuyo nodeName es 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>


Como msElementsFromPoint devuelve todos los elementos que forman intersección con un punto, incluido el elemento html y otros, el código filtra solo el elemento div usando la propiedad nodeName.

El método msElementsFromRect

El método msElementsFromRect acepta un punto superior e izquierdo, y el ancho y alto de un área rectangular, y devuelve los elementos que formen intersección con esa área.

MétodoDescripción

msElementsFromRect(left,top,width,height);

Devuelve una NodeList de elementos que se encuentren en un rectángulo definido por los parámetros left,top,width y height.

 

El ejemplo anterior puede modificarse para usar msElementsFromRect agregando un parámetro width y height. Por ejemplo:


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. 
         }
      }
   }


En esta revisión de la función "testHit", al hacer clic se devuelven los elementos situados en un área rectangular de 50 píxeles.

Temas relacionados

Document Object Model (DOM)
Guía de Internet Explorer 10 para desarrolladores

 

 

Mostrar:
© 2015 Microsoft