Передача щелчков мышью через наложенный элемент <div>

Question

Можно ли пропустить щелчки мыши через наложенный элемент:

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

вплоть до нижележащих элементов (абзацы, изображения, ссылки и т. Д.)?

---

Или сформулировать иначе:

Есть ли способ создания чисто эстетического наложения / слоя в HTML, CSS и / или JavaScript?

Answer 1

Это можно решить с помощью CSS:

div { pointer-events:none; }

Поддерживается IE 11+, Chrome, Firefox, Safari и Opera.

Подробнее: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Answer 2

Вы можете попытаться получить координаты мыши в событии щелчка, а затем получить элемент, скрыв наложение, используйте document.elementFromPoint(x, y) и затем снова отобразите наложение.

См. Этот вопрос для получения дополнительной информации о elementFromPoint:

Как мне найти DOM-узел, который находится в данной (X, Y) позиции? (Тест удара)

Answer 3

Я вижу, вы используете "rain.24.png" - это анимация наложения? Как вы меняете изображения для имитации дождя? Если это так, то может быть лучше остановить / скрыть анимацию при mousedown, а затем активировать вашу функцию для нижележащих элементов с помощью mouseup.

Если это не так, то используйте ответ Винсента, чтобы получить элемент, затем вызовите связанную функцию или используйте триггер для имитации щелчка

Answer 4

Вы можете назначить событие щелчка мышью на покрывающий элемент div, а затем выполнить итерацию по всем элементам, которые, как вы знаете, могут быть ниже, проверяя их положение, ширину и высоту, чтобы увидеть, находится ли это местоположение щелчка мыши в пределах их границ, и если это так, вызовите событие onclick.

Чтобы сделать подмножество возможных элементов меньшим, вы могли бы дать кликабельным элементам, которые могут быть в div, специальный класс.