[英]Clickable area around overlay content
It's probably an easy solution but I just can't get my head around it. 这可能是一个简单的解决方案,但我只是无法解决。 What I want to do is to make an overlay layer with child layers clickable, without assigning any interaction to the children. 我要做的是使带有子图层的覆盖层可点击,而无需给子图层分配任何交互。 Like so - 像这样-
<div class="overlay">
<div class="content">Lorem ipsum dolor.</div>
</div>
jQuery sample function: jQuery示例函数:
$('.overlay').click(function() {
$(this).hide();
});
What happens here is that the function runs even if I click on a child layer. 这里发生的是,即使我单击子图层,该功能也会运行。 How should I set this up so that only the area around the children is affected? 我应该如何设置以便只影响孩子周围的区域?
You could check the click target by e.target
您可以通过e.target
查看点击目标
$('.overlay').click(function(e) {
if (!$(e.target).is('.content')) {
$(this).hide();
}
});
try with e.stopPropagation(); 尝试使用e.stopPropagation(); - --
$('.content').click(function(e) {
e.stopPropagation();
alert('child');
});
创建的示例,单击内容可防止隐藏操作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.