Passing mouse clicks through an overlaying element <div>

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?

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

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)

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

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.