Erweiterte Treffererkennung

Das DOM (Dokumentobjektmodell) in Windows Internet Explorer unterstützt seit einiger Zeit die elementFromPoint-Methode (eingeführt im CSSOM-Ansichtsmodul des World Wide Web Consortium (W3C)). (Windows Store-Apps mit JavaScript unterstützen auch die elementFromPoint-Methode.) Die elementFromPoint-Methode gibt das Element unter einer x- und y-Koordinate in einem Viewport zurück. Dies funktioniert gut für einzelne Elemente wie das Klicken auf ein Bild auf einer Seite. Bei Spielen, Grafikeditoren und anderen Anwendungen, die eventuell mehrere Ebenen verwenden, kann aber nicht jedes Ereignis mit der elementFromPoint-Methode erfasst werden, das einen bestimmten Punkt auf dem Bildschirm schneidet.

Internet Explorer 10 und Windows Store-Apps mit JavaScript führen die msElementsFromPoint- und diemsElementsFromRect-Methode ein, die eine Knotenliste aller Elemente zurückgeben, die den Punkt an den angegebenen x- und y-Koordinaten oder entsprechend einen rechteckigen Bereich schneiden.

Dieses Thema enthält die folgenden Abschnitte:

Die msElementsFromPoint-Methode

Die msElementsFromPoint-Methode verwendet die x- und y-Koordinaten eine Punktes und gibt eine Knotenliste der Elemente zurück, die diesen Punkt schneiden. Die Liste ist nach der z-Reihenfolge sortiert, wobei das erste Element am Anfang steht.

MethodeBeschreibung

msElementsFromPoint(x, y)

Gibt eine NodeList der Elemente unter einem Punkt zurück, der von x und y definiert wird.

 

Im folgenden Codebeispiel wird eine Reihe überlappender div-Blöcke unterschiedlicher Farbe erstellt. Wenn Sie auf einen Block klicken, werden mithilfe der msElementsFromPoint-Methode alle Elemente an der Klickposition abgerufen und die Hintergrundfarbe in Grau geändert. Da alle Elemente zurückgegeben werden, einschließlich body und html, ändern wir damit nur die Hintergrundfarbe der Elemente mit div als nodeName.


<!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>


Da msElementsFromPoint alle Elemente zurückgibt, die einen Punkt schneiden, einschließlich des html-Elements und anderer, filtert der Code das div-Element mithilfe der nodeName-Eigenschaft heraus.

Die msElementsFromRect-Methode

Die msElementsFromRect-Methode verwendet den Punkt links oben in einem Rechteck sowie dessen Breite und Höhe, um alle Elemente zurückzugeben, die diesen Bereich schneiden.

MethodeBeschreibung

msElementsFromRect(left,top,width,height);

Gibt eine NodeList der Elemente unter einem Rechteck zurück, die anhand der Parameter left, top, width und height definiert sind.

 

Sie können das Beispiel von oben ändern, um msElementsFromRect zu verwenden, indem Sie einen width-Parameter und height-Parameter hinzufügen. Beispiel:


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


In diesem Update der "testHit"-Funktion werden Elemente mit einem rechteckigen Bereich von weniger als 50 Pixeln zurückgegeben, wenn Sie mit der Maus darauf klicken.

Verwandte Themen

Dokumentobjektmodell (DOM)
Internet Explorer 10: Handbuch für Entwickler

 

 

Anzeigen:
© 2014 Microsoft