使用jQuery使覆盖div不可点击

Question

I have a problem, I have a semi-transparent div over my menu on a page, and I want to make that div click-through.

The CSS property pointer-events is not an option because I need to generate valid CSS. I tried with:

event.preventDefault();
event.stopPropagation();

with no luck, the div on the "bottom layer" doesn't be clicked.

Here is my code in a simplified version:

<div id="menuContainer">
<div id="menu">
//here comes all the items of my menu
</div>
</div>
<div id="shadow">
</div>

the css:

#menuContainer {
position: absolute;
top: 0px;
z-index: 0;
height: 200px;
}
#menu {
width: 300px;
height: 30px;
margin: 0 auto;
position: absolute;
z-index: 10; 
top: 160px;
}
#shadow {
position: absolute;
z-index: 1;
top: 150px
height: 200px;
}

is not an option for me to change the z-index or the layout, just I need when I click the shadow, the click is "re-transmitted" to the menu.

Answer 1

Have you looked into using jQuery's click() function?

http://api.jquery.com/click/

You could catch the click event on the topmost element, simulate a click on the element below, and then return to stop the original click.

Answer 2

You could do something like this

$('#shadow').click(function() {
    $('#menu').trigger('click');
});

The shadow element is passing the click event on to the menu.

If you need to relay the mouse position as well, check out the Mouse Position tutorial.