Teste de acertos avançado

O DOM no Windows Internet Explorer oferece suporte para o método elementFromPoint (introduzido no Módulo de Exibição CSSOM do World Wide Web Consortium - W3C) há algum tempo. (Os aplicativos da Windows Store em JavaScript também são compatíveis com o método elementFromPoint.) O método elementFromPoint retorna o elemento sob uma coordenada x e y em um visor. Isso funciona bem para elementos simples, como clicar em uma imagem em uma página. No entanto, para jogos, editores gráficos e outros aplicativos que podem usar várias camadas, não é possível obter tudo o que intercepta um determinado ponto na tela usando o método elementFromPoint.

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript apresentam os métodos msElementsFromPoint e msElementsFromRect, que retornam uma lista de nós de todos os elementos que interseccionam o ponto nas coordenadas x- e y-específicas ou em uma área retangular, respectivamente.

Este tópico contém as seguintes seções:

O método msElementsFromPoint

O método msElementsFromPoint toma as coordenadas x e y de um ponto e retorna uma lista de nós de todos os elementos que interceptam o ponto. A lista é classificada por ordem z, sendo que o primeiro elemento é o mais alto na ordem.

MétodoDescrição

msElementsFromPoint(x, y)

Retorna uma NodeList de elementos que estão em um ponto definido por x e y.

 

A amostra de código a seguir cria uma série de blocos div sobrepostos de cores variadas. Ao clicar em um deles, ele usa o método msElementsFromPoint para obter todos os elementos sob a posição do clique e alterar a cor de fundo para cinza. Como todos os elementos são retornados, incluindo body e html, alteraremos a cor de fundo apenas dos elementos com nodeName de 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 retorna todos os elementos que interceptam o ponto, incluindo o elemento html e outros, o código filtra para apenas o elemento div usando a propriedade nodeName.

O método msElementsFromRect

O método msElementsFromRect aceita um ponto superior e esquerdo e a largura e o comprimento de uma área retangular e retorna quaisquer elementos que interceptem aquela área.

MétodoDescrição

msElementsFromRect(left,top,width,height);

Retorna uma NodeList de elementos que estão em um retângulo definido pelos parâmetros left,top,width e height .

 

O exemplo anterior pode ser modificado para usar msElementsFromRect adicionando um parâmetro width e height. Por exemplo:


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


Nesta atualização da função "testHit", os elementos que estejam sob uma área retangular de 50 pixels são retornados quando o mouse for clicado.

Tópicos relacionados

DOM (Document Object Model)
Guia para Desenvolvedores do Internet Explorer 10

 

 

Mostrar:
© 2014 Microsoft