In meiner html5 App mache ich eine Menge dynamischer dom Elementerstellung / Manipulation. In bestimmten Fällen muss ich überprüfen, ob ein Element (z. B. ein Div) vom Benutzer "anklickbar" sein kann. "Clickable" bedeutet, dass beide der folgenden Bedingungen erfüllt sind:
display und visibility Eigenschaften des Elements und aller seiner übergeordneten Elemente) Ich kann reines JS oder jQuery verwenden. Mit jQuery ist es einfach, den ersten Teil zu überprüfen (d. H. Mit .is(':visible') . Wenn ich jedoch ein Element habe, das durch ein anderes Element verdeckt ist, gibt dies true zurück.
Wie kann ich überprüfen, ob das Element wirklich anklickbar ist?
Dies verwendet Standard-Videospiel-Kollisionstests, um festzustellen, ob ein Objekt den gesamten Platz belegt, den ein anderes Objekt einnimmt. Ich werde diesen Teil nicht erklären, Sie können die andere Antwort sehen.
Der schwierigste Teil für mich war, herauszufinden, ob sich ein Element tatsächlich über oder unter einem anderen Element befindet. Zuerst suchen wir nach einem definierten Z-Index, und wenn keiner gesetzt ist, überprüfen wir das Elternelement, bis wir zum Dokument gelangen. Wenn wir den ganzen Weg bis zu dem Dokument gehen, ohne einen definierten Z-Index gefunden zu haben, wissen wir, welches Element zuerst gerendert wurde (Markup ist höher im Dokument), wird darunter liegen.
Ich habe dies als jQuery pluin implementiert. $("#myElement").isClickable()
Das Folgende ist eine wirklich grobe Implementierung - es verwendet die Methode document.elementFromPoint(x, y) und führt einen umfassenden Scan der Position jedes Elements durch, um festzustellen, ob das Element anklickbar ist.
Um es einfach und leistungsfähig zu halten, wird die Position jedes Elements in 50-Pixel-Rastern überprüft. Beispiel: Wenn ein Element 100x100 Pixel groß ist, werden 9 Prüfungen durchgeführt (0 0, 50 0, 100 0, 0 50, 50 50, 100 50, 0 100, 50 100 und 100 100). Dieser Wert könnte für einen detaillierteren Scan optimiert werden.
Ein weiterer Faktor, dem Sie möglicherweise Rechnung tragen möchten, wie viel eines Elements anklickbar ist. Wenn zum Beispiel eine 1-Pixel-Linie des Elements sichtbar ist, ist es wirklich anklickbar? Einige zusätzliche Prüfungen müssten hinzugefügt werden, um diese Szenarien zu berücksichtigen.
In der folgenden Demo gibt es 5 Quadrate - rot, grün, blau, gelb, cyan, schwarz und grau. Das Cyan-Element ist unter dem gelben Element verborgen. Das schwarze Element befindet sich unterhalb des grauen Elements, verwendet jedoch z-index , um es oben anzuzeigen. So wird jedes Element außer Cyan und Grau als anklickbar angezeigt.
Hinweis : Grün wird als nicht anklickbar angezeigt, weil es hinter den Konsolenprotokollen versteckt ist (glaube ich)
Hier ist die Demo:
Tags und Links javascript jquery css dom