I can't get the example page to work in IE 9 at all, whether standards mode or compatibility mode. Apparently IE 9 supports pointer-events:none but the docs claim it's only for SVG elements.
–
Andy EAug 6 '11 at 18:07

Also nice to know...
You can disable pointer-events in a parent element (probably transparent div) but have it still enabled for its child elements.
This is helpful if you work with multiple overlapping div layers, where you want to be able to click child elements, while having the parent layers not react on any mouse events at all. For this all parenting divs get pointer-events: none and its clickable children get pointer-events reenabled by pointer-events: all

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.

I currently work with canvas speech balloons. But because the balloon with the pointer is wrapped in a div, some links under it aren't click able anymore. I cant use extjs in this case.
See basic example for my speech balloon tutorialrequires HTML5

So I decided to collect all link coordinates from inside the balloons in an array.

I call this function on each (new) balloon. It grabs the coordinates of the left/top and right/down corners of a link.class - additionally the name attribute for what to do if someone clicks in that coordinates and I loved to set a 1 which means that it wasn't clicked jet. And unshift this array to the clickarray. You could use push too.

This function proofs the coordinates of a body click event or whether it was already clicked and returns the name attribute. I think it is not necessary to go deeper, but you see it is not that complicate.
Hope in was enlish...

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.

Thanks bobince. I've decided to go with your latter advice. Just made more elements to create the outline and shaded effects. Also, thanks lincolnk for the advice as well.
–
RyanSep 9 '10 at 22:23

9

downvoted for being incorrect at the time of answering.
–
flying sheepJul 29 '11 at 11:20

2

Downvoted for no reason. It's correct - You can not get this properly cross-browser otherwise (Opera does not work for example, nor do slightly older versions of other non-IE browsers).
–
Jani HartikainenOct 7 '11 at 12:25

$('.overlay').click(function(e){
var left = $(window).scrollLeft();
var top = $(window).scrollTop();
//hide the overlay for now so the document can find the underlying elements
$(this).css('display','none');
//use the current scroll position to deduct from the click position
$(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
//show the overlay again
$(this).css('display','block');
});

This is sometimes the easiest cross-browser solution. You can even add a class to whatever needs to be clickable and then iterate through duplicating those items in jquery on page load
–
koosaDec 6 '13 at 16:31

I think that you can consider changing your markup. If I am not wrong, you'd like to put an invisible layer above the document and your invisible markup may be preceding your document image (is this correct?).

Instead, I propose that you put the invisible right after the document image but changing the position to absolute.

Notice that you need a parent element to have position: relative and then you will be able to use this idea. Otherwise your absolute layer will be placed just in the top left corner.

An absolute position element is positioned relative to the first parent
element that has a position other than static.
If no such element is found, the containing block is html