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事件，模拟下面元素的单击，然后 return 以停止原始点击。

Answer 2

你可以做这样的事情

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

阴影元素将点击事件传递给菜单。

如果您还需要转发鼠标位置，请查看Mouse Position教程。

使用jquery使叠加div不可点击

2 个答案: