Click through a DIV to underlying elements

Question

Hi there,

I have a div that has a transparent background, and a border - sort of like an actual window, window-frame, and transparent walls. Under this, I have more elements.

Currently, I'm able to click the underlying elements when I click outside of the overlay div; however, I'm unable to click the underlying elements when clicking directly on the overlay div.

I want to be able to click through this "window" div to the underlying elements. Any other solutions you can think of?

Here is a preview of my dilemma:

Thanks, Ryan

Answer 1

it doesn't work that way. the work around is to manually check the coordinates of the mouse click against the area occupied by each element.

area occupied by an element can found found by 1. getting the location of the element with respect to the top left of the page, and 2. the width and the height. a library like jQuery makes this pretty simple, although it can be done in plain js. adding an event handler for mousemove on the document object will provide continuous updates of the mouse position from the top and left of the page. deciding if the mouse is over any given object consists of checking if the mouse position is between the left, right, top and bottom edges of an element.

Answer 2

Nope, you can't click ‘through’ an element. You can get the co-ordinates of the click and try to work out what element was underneath the clicked element, but this is really tedious for browsers that don't have document.elementFromPoint. Then you still have to emulate the default action of clicking, which isn't necessarily trivial depending on what elements you have under there.

Since you've got a fully-transparent window area, you'll probably be better off implementing it as separate border elements around the outside, leaving the centre area free of obstruction so you can really just click straight through.