使用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事件傳遞到菜單上。

如果您還需要中繼鼠標位置，請查看“ 鼠標位置”教程。