使用jQuery使覆盖div不可点击

Question

我有问题，页面上的菜单上方有一个半透明的div，我想使该div点击。

CSS属性指针事件不是一个选项，因为我需要生成有效的CSS。 我尝试过：

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

运气不好，不会单击“底层”上的div。

这是我的简化版本代码：

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

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;
}

我不能选择更改z-index或布局，仅当我单击阴影时才需要，单击将“重新传输”到菜单中。

Answer 1

您是否考虑过使用jQuery的click（）函数？

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

您可以在最上面的元素上捕获click事件，在下面的元素上模拟单击，然后返回以停止原始单击。

Answer 2

你可以做这样的事情

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

阴影元素将click事件传递到菜单上。

如果您还需要中继鼠标位置，请查看“ 鼠标位置”教程。