Exporter (0) Imprimer
Développer tout
Ce sujet n'a pas encore été évalué - Évaluez ce sujet

Test de positionnement avancé

Le DOM dans Windows Internet Explorer prend en charge la méthode elementFromPoint (introduite dans le module CSSOM View de W3C (World Wide Web Consortium) depuis quelque temps. (Les applications du Windows Store en JavaScript prennent également en charge la méthode elementFromPoint.) La méthode elementFromPoint retourne l’élément sous des coordonnées x- et y- dans une fenêtre d’affichage. Cela convient pour des éléments uniques, tels qu’un clic sur une image dans une page. Toutefois, en ce qui concerne les jeux, les éditeurs graphiques et d’autres applications pouvant contenir plusieurs couches, il n’est pas possible d’obtenir tous les éléments qui coupent un point donné sur l’écran grâce à la méthode elementFromPoint.

Internet Explorer 10 et les applications du Windows Store en JavaScript introduisent les méthodes msElementsFromPoint et msElementsFromRect qui retournent une liste de nœuds de tous les éléments qui coupent le point aux coordonnées x- et y- données ou une zone rectangulaire, respectivement.

Cette rubrique contient les sections suivantes :

Méthode msElementsFromPoint

La méthode msElementsFromPoint prend les coordonnées x- et y- d’un point et retourne une liste de nœuds des éléments qui coupent le point. La liste est triée par ordre z, le premier élément apparaissant au début.

MéthodeDescription

msElementsFromPoint(x, y)

Retourne un NodeList d’éléments qui se trouvent sous un point défini par x et y.

 

L’exemple de code suivant crée une série de blocs div se chevauchant de différentes couleurs. Lorsque vous cliquez sur un bloc, il utilise la méthode msElementsFromPoint pour récupérer tous les éléments sous la position du clic et change la couleur de l’arrière-plan qui apparaît en gris. Étant donné que tous les éléments sont retournés, notamment body et html, la couleur de l’arrière-plan change seulement sur les éléments avec un nodeName défini sur 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>


Étant donné que msElementsFromPoint retourne tous les éléments qui coupent un point, notamment l’élément html et d’autres, le code filtre uniquement l’élément div à l’aide la propriété nodeName.

Méthode msElementsFromRect

La méthode msElementsFromRect accepte un point supérieur gauche et la largeur et la hauteur d’une zone rectangulaire et retourne les éléments qui coupent cette zone.

MéthodeDescription

msElementsFromRect(left,top,width,height);

Retourne un NodeList d’éléments qui se trouvent sous un rectangle défini par les paramètres left, top, width et height.

 

L’exemple précédent peut être modifié de façon à utiliser msElementsFromRect. Il suffit pour cela d’ajouter un paramètre width et un paramètre height. Par exemple :


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


Dans cette mise à jour de la fonction "testHit", les éléments qui sont sous une zone rectangulaire de 50 pixels sont retournés lors d’un clic.

Rubriques associées

DOM (Document Object Model)
Guide du développeur Internet Explorer 10

 

 

Cela vous a-t-il été utile ?
(1500 caractères restants)
Merci pour vos suggestions.
Afficher:
© 2014 Microsoft. Tous droits réservés.