.click仅在父容器上，不影响子容器

Question

我正在我的网站上创建叠加/模态/弹出窗口。

当用户点击按钮时，会出现叠加层。要关闭叠加层，我希望用户能够点击页面外部区域的任何位置（例如我示例中的黑色不透明区域）。

JSFiddle：https://jsfiddle.net/7ewexsqr/

我已设置以下内容：

$('.overlay-wrapper').click(function(){
        $('.overlay-wrapper').css('opacity','0');
        $('.overlay-wrapper').css('z-index','-100');
    });

这很好用，然而它也会影响.overlay-content div内的点击，.overlay-wrapper的孩子。我希望用户能够在内容框中单击/突出显示等，而不是触发点击事件。

如何使此点击事件不适用于内部内容？

Answer 1

检查event.target，如果它是.overlay-content，或.overlay-content的后代，请不要关闭弹出窗口（您可以使用.closest()，因为它会自行测试）：

var $target = $( e.target );

if ( $target.closest( '.overlay-content' ).length ) {
    return true;   
}

Here's a fiddle

Answer 2

使用false

将点击处理程序附加到叠加层本身

$('.overlay-content').click(false);

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.button').click(function(){
        $('.overlay-wrapper').css('opacity','1');
        $('.overlay-wrapper').css('z-index','100');
    });
    $('.overlay-content').click(false);
    $('.overlay-wrapper').click(function(){
        $('.overlay-wrapper').css('opacity','0');
        $('.overlay-wrapper').css('z-index','-100');
    });
});

＆＃13;

.button{background-color:orange;color:#fff;padding:10px;display:inline-block;cursor:pointer;}
.overlay-wrapper {
    opacity:0;
    z-index:-100;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.4);
    cursor:pointer;
}
.overlay-content{
    border:1px dotted white;
    padding:10px;
    margin:50px;
    background-color:#000;
    cursor:default;
}
html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
h1,p {
    margin:0;
    padding:0;
    color:#fff;
}
body {
    font-family:Arial;
    background-size:cover;
    background-image:url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
    <div class="overlay-content">
         <h1>Clicking inside this box should *do NOTHING*</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum. Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或，使用event.target

if (!$(event.target).closest('.overlay-content').length)

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay-wrapper').css('opacity', '1');
    $('.overlay-wrapper').css('z-index', '100');
  });

  $('.overlay-wrapper').click(function(event) {
    if (!$(event.target).closest('.overlay-content').length) {
      $('.overlay-wrapper').css('opacity', '0');
      $('.overlay-wrapper').css('z-index', '-100');
    }
  });
});

＆＃13;

.button {
  background-color: orange;
  color: #fff;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.overlay-wrapper {
  opacity: 0;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.overlay-content {
  border: 1px dotted white;
  padding: 10px;
  margin: 50px;
  background-color: #000;
  cursor: default;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
  padding: 0;
  color: #fff;
}
body {
  font-family: Arial;
  background-size: cover;
  background-image: url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
  <div class="overlay-content">
    <h1>Clicking inside this box should *do NOTHING*</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum.
      Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean
      mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

来自

您的问题源于所谓的 event bubbling 。

如何解决

有一个specific jQuery method来解决这个问题。使用

$('.overlay-content').on("click", function(event){
    event.stopPropagation(); 
});

这会阻止叠加内容中的点击事件冒泡到.overlay-wrapper，因此不再触发其点击功能。

工作示例，使用您的代码

https://jsfiddle.net/7ewexsqr/5/

Answer 4

检查目标是否相同。

if( e.target != this ) 
         return;

试试这个：

$('.overlay-wrapper').click(function(e) {
    if (e.target != this)
      return;
    $('.overlay-wrapper').css('opacity', '0');
    $('.overlay-wrapper').css('z-index', '-100');
  });

<强>片断：

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay-wrapper').css('opacity', '1');
    $('.overlay-wrapper').css('z-index', '100');
  });

  $('.overlay-wrapper').click(function(e) {
    if (e.target != this)
      return;
    $('.overlay-wrapper').css('opacity', '0');
    $('.overlay-wrapper').css('z-index', '-100');
  });

});

.button {
  background-color: orange;
  color: #fff;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.overlay-wrapper {
  opacity: 0;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.overlay-content {
  border: 1px dotted white;
  padding: 10px;
  margin: 50px;
  background-color: #000;
  cursor: default;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
  padding: 0;
  color: #fff;
}
body {
  font-family: Arial;
  background-size: cover;
  background-image: url('http://www.imgbase.info/images/safe-wallpapers/digital_art/2d/31494_2d_funky_colorful.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click me!</div>
<div class="overlay-wrapper">
  <div class="overlay-content">
    <h1>Clicking inside this box should *do NOTHING*</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum.
      Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean
      mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.</p>
  </div>
</div>

Answer 5

所有其他答案建议您编写一些可能有用的JavaScript，但这不是解决此问题的正确方法。

最简单有效的方法是将overlay-content div移到overlay-wrapper div之外，而不是将其置于CSS中。

<div class="button">Click me!</div>
<div class="overlay-wrapper">

</div>
<div class="overlay-content">
  <h1>Clicking inside this box should *do NOTHING*</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse   congue ut felis et euismod. Donec congue neque nec nibh blandit porta. Mauris velit sapien, viverra quis accumsan sit amet, rhoncus eu lacus. Maecenas suscipit diam in iaculis interdum. Nulla at eros non nulla laoreet fermentum nec aliquet odio. Nam sed velit eget lacus malesuada aliquet sed vel odio. In ac magna accumsan tellus consequat iaculis. Proin facilisis lorem non ex molestie feugiat. Curabitur sodales ligula elit. Aenean mollis, velit sed interdum rhoncus, enim nulla tincidunt tortor, non efficitur odio lacus non neque. Sed venenatis sit amet enim nec dapibus. Donec tempor viverra iaculis. Sed nec sapien non nisl finibus facilisis.    </p>
</div>

并且应该更改overlay-content div

上的不透明度和z-index