Passing mouse clicks through an overlaying element <div>

Question

Is it possible to pass mouse clicks through an overlaying element:

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

down to underlaying elements (paragraphs, images, links, etc)?

---

Or worded another way:

Is there any way of creating a purely aesthetic overlay/layer in HTML, CSS and/or JavaScript?

Chamfer

Answer 1

You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.

See this SO question for more info about elementFromPoint:

How do I find the DOM node that is at a given (X,Y) position? (Hit test)

Scherle

and simulate click event using that element #774139 – Afghanistan

How about cloning the body node and processing that instead of hiding and showing again? – Shulins

+1 for using other SO answers. Efficient code reuse is always a good thing. – Bjorn

Answer 2

This can be solved using CSS:

div { pointer-events:none; }

Supported by IE 11+, Chrome, Firefox, Safari and Opera.

More details: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Tallu

It's probably worth noting that this isn't supported in IE 8, according to the compatibility table on the MDN page you linked to. – Lesseps

It is also worth noting that this will also stop all other pointer events from hitting the overlay, which may not be the intended behaviour. – Auspicious

Up-voted, would be just good to note that IE11 onwards supports it, while older IE may have partial support for SVG objects but not HTML objects: caniuse.com/#feat=pointer-events – Noland

Answer 3

I see you are using "rain.24.png" is the overlay animated? As in you are repositioning the images to simulate rain? If this is the case, then it might be best to stop/hide the animated on mousedown and then get the activate your function on the underlying elements using mouseup.

If that isn't the case, then use Vincent's answer to get the element, then call the associated function or use trigger to simulate the click

Khudari

Answer 4

You could assign a mouse click event to the covering div, then iterate through all elements that you know might be underneath, inspecting their position, width, and height to see if that location of the mouse click was within their borders, and if it was, call their onclick event.

To make the subset of possible elements smaller, you could give clickable elements that might be under the div, a special class.

Libbey