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

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

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

Ответ 1

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

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

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

Ответ 2

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

div { pointer-events:none; }

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

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

Ответ 3

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

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

Ответ 4

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

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