Mit JavaScript ist es möglich, ein Element an einer gegebenen Position (Koordinate) abzufragen. Die linke obere Ecke des Browser entspricht dabei der Koordinate (0/0). Leider gibt es im DOM-Standard nur die Methode document.elementFromPoint, welche nur das oberste Element einer Koordinate liefert. Wenn zwei Elemente an einer Position übereinander liegen wird nur das Element, was oben liegt, erkannt.
Im Windows Internet Explorer ist es aber möglich, alle Elemente an einem Punkt zu bestimmen. Dafür wurde die Methode document.msElementsFromRect (siehe Erweiterte Treffererkennung) eingeführt.
Beispiel
Das folgende Beispiel beinhaltet zwei Quadrate. Ein rotes Quadrat und ein blaues Quadrat. Die Quadrate liegen genau an derselben Stelle und das blaue Quadrat verdeckt das rote Quadrat. Mit document.elementFromPoint wird nur das blaue Quadrat erkannt (weil dessen z-index am Höchsten ist). Die Methode document.msElementsFromPoint erkennt jedoch beide Quadrate:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <title>document.elementFromPoint / document.msElementsFromPoint</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> *{ margin: 0; padding: 0; border: 0;} .square{ width: 400px; height: 400px; position: absolute; } #blueSquare{ background-color: blue; z-index: 2; } #redSquare{ background-color: red; z-index: 1; } </style> </head> <body> <div id="blueSquare" class="square"></div> <div id="redSquare" class="square"></div> <script> console.log("document.elementFromPoint"); var element = document.elementFromPoint(0, 0); console.log(" - Element: "+element.id); // getElementsFromPoint console.log("document.msElementsFromPoint"); var elements = document.msElementsFromPoint(0, 0); for (var i = 0; i < elements.length; i++){ if(elements[i].id.length > 0) console.log(" - Element: "+elements[i].id); } </script> </body> </html> |
Ausgabe
document.elementFromPoint - Element: blueSquare document.msElementsFromPoint - Element: blueSquare - Element: redSquare |
Browserübergreifender Lösungsansatz
Wer etwas Ähnliches für andere Browser haben möchte, der könnte sich eine Methode namens elementsFromPoint selber schreiben und die ID eines Elements an Position X, Y holen, danach die Eigenschaft pointer-events: none für das erkannte Element setzen und dann wieder das nächste Element an Position X, Y abfragen.