jquery 关闭外部和内部点击的叠加？
我对某些事情感到困惑，认为这里有人可能有洞察力。
我已经构建了一个简单的覆盖层，但它没有按预期工作。 这是 css：
#overlayOuter {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: #000;
z-index: 100;
}
#overlayInner {
position: absolute;
top: 100px;
left: 200px;
width: 600px;
height: 400px;
z-index: 101;
}
html 很简单：
Blahblahblah!
<a href="#" onclick="$('#overlayOuter').show();return false;">show overlay</a>
<div id="overlayOuter">
<div id="overlayInner">
Oyeah? Blahblah!
</div>
</div>
然后，当有人单击“overlayOuter”而不是“overlayInner”框时，我希望 jquery 关闭叠加层（这样我就可以包含表单等）。
我期望工作的第一个jquery是……
$('#overlayOuter').click(function() {
$('#overlayOuter').fadeOut('fast');
});
它可以工作，但奇怪的是在单击overlayInner时也会关闭！任何形式等等现在都没用了！
以下确实可以按预期工作......
$('#overlayOuter').click(function(e) {
if ($(e.target).parents('#overlayInner').length==0) {
$('#overlayOuter').fadeOut('fast');
}
});
但是WTF！第一个不应该起作用吗？ z-index 是否足以将overlayInner 与overlayOuter 分开？
I'm puzzled by something, thought someone here might have insight.
I've built a simple overlay, but it's not working as expected.
Here's the css:
#overlayOuter {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: #000;
z-index: 100;
}
#overlayInner {
position: absolute;
top: 100px;
left: 200px;
width: 600px;
height: 400px;
z-index: 101;
}
The html is simple:
Blahblahblah!
<a href="#" onclick="$('#overlayOuter').show();return false;">show overlay</a>
<div id="overlayOuter">
<div id="overlayInner">
Oyeah? Blahblah!
</div>
</div>
I then wanted jquery to close the overlay when someone clicked on overlayOuter but not the overlayInner box (so I could include forms and such).
The first jquery I was expecting to work was ...
$('#overlayOuter').click(function() {
$('#overlayOuter').fadeOut('fast');
});
... which works but strangely also closes when clicking overlayInner! Any forms, etc. are now useless!
The following does work as desired ...
$('#overlayOuter').click(function(e) {
if ($(e.target).parents('#overlayInner').length==0) {
$('#overlayOuter').fadeOut('fast');
}
});
... but WTF!! Shouldn't the first one work? Isn't the z-index enough to mask overlayInner separate from overlayOuter?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您正在嵌套元素，因此当您单击内部 div 时，您仍然在单击外部。
你需要像这样将它们分开：
这样布局不是问题，因为你确实将位置设置为绝对
这是 Stack 101s 最初构建的更新后的 jfiddle
http://jsfiddle.net/Dapuc/3/
You're nesting the elements, so when you click the inner div, you're still clicking the outer.
you need to separate them like this:
Not a problem with layout here that way, since you did set the position to absolute anyway
Here's the updated jfiddle from Stack 101s initially built one
http://jsfiddle.net/Dapuc/3/
这是由于 Javascript 事件传播/冒泡造成的。元素上发生的事件也会发生在元素容器上。为了避免这种情况，请检查
event.target是否是您想要的元素，如本演示所示：http ://jsfiddle.net/WQS3V/This is due to Javascript event propagation/bubbling. Events that take place on an element will also take place on the elements containers. To avoid this, check that
event.targetis the element you want, like in this demo: http://jsfiddle.net/WQS3V/第一个确实有效：
http://jsfiddle.net/Dapuc/1/
The first one does work :
http://jsfiddle.net/Dapuc/1/
你可以添加这个：
You can add this: