Weiterleitung von Mausklicks durch ein überlagerndes Element <div>

Question

Ist es möglich, Mausklicks durch ein überlagerndes Element zu leiten?

<div style="background: url('img/rain.png'); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>

bis hin zu den darunter liegenden Elementen (Absätze, Bilder, Links usw.)?

---

Oder anders formuliert:

Gibt es eine Möglichkeit, ein rein ästhetisches Overlay/eine Ebene in HTML, CSS und/oder JavaScript zu erstellen?

Answer 1

Dies kann mit CSS gelöst werden:

div { pointer-events:none; }

Unterstützt von IE 11+, Chrome, Firefox, Safari und Opera.

Weitere Einzelheiten: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Answer 2

Sie könnten versuchen, die Mauskoordinaten in Ihrem Klick-Ereignis abzurufen und dann ein Element abrufen, indem Sie Ihr Overlay ausblenden, indem Sie document.elementFromPoint(x, y) und zeigen Sie dann das Overlay erneut an.

In dieser SO-Frage finden Sie weitere Informationen zu elementFromPoint:

Wie finde ich den DOM-Knoten, der sich an einer bestimmten (X,Y) Position befindet? (Treffertest)

Answer 3

Wie ich sehe, verwenden Sie "rain.24.png", ist das Overlay animiert? Das heißt, Sie positionieren die Bilder neu, um Regen zu simulieren? Wenn dies der Fall ist, dann könnte es am besten sein, zu stoppen / verstecken die animierte auf mousedown und dann die Aktivierung Ihrer Funktion auf die darunter liegenden Elemente mit mouseup.

Wenn das nicht der Fall ist, dann verwenden Sie Vincents Antwort, um das Element zu erhalten, und rufen Sie dann die zugehörige Funktion auf oder verwenden Sie Auslöser um das Klicken zu simulieren

Answer 4

Sie könnten ein Mausklick-Ereignis dem abdeckenden Div zuweisen und dann alle Elemente durchlaufen, von denen Sie wissen, dass sie sich darunter befinden könnten, indem Sie ihre Position, Breite und Höhe überprüfen, um zu sehen, ob die Position des Mausklicks innerhalb ihrer Grenzen lag, und wenn dies der Fall war, ihr Onclick-Ereignis aufrufen.

Um die Teilmenge der möglichen Elemente zu verkleinern, könnten Sie anklickbaren Elementen, die sich unter dem div befinden könnten, eine spezielle Klasse geben.