背景点击事件适用于一切 - 修复？

Question

我的文档结构是这样的，非常简化：

<div id="background">
  <div id="button">I am a button!</div>
</div>

我使用 jquery .click() 向我的#background 添加点击事件，但是当点击#button 时它也可以工作。当我禁用按钮的指针事件时，它会失去功能。

我也尝试了以下结构：

<div id="background">
  <div id="button">I am a button!</div>
  <div id="fullscreen-click-bg"></div>
</div>

• 其中#fullscreen-click-bg 是width:100%; height:100% 元素。仍然所有点击都通过按钮。

如何处理这种情况？我不希望我的鼠标点击传递元素。

Answer 1

button是background的child，所以当button被点击时需要停止事件：

$('#button').click(function(e) {
    e.stopPropagation();
});

Answer 2

检查目标

 $('#background').click(function(e){
       if(e.target.id == 'background'){
       ...code for background...
       }
    });

 $('#background').click(function(e){
           if(e.target.id == 'background'){
           console.log('background directly clicked');
           }
        });

#background {
  width: 500px;
  height: 500px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="background">
  <div id="button">I am a button!</div>
  <div id="fullscreen-click-bg"></div>
</div>

或者您可以使用on 并传入false 来安排您的处理

 $(document).on('click', '#background', function(e){
               ...code for background...
           });
 $(document).on('click', '#button',false);

 $(document).on('click', '#background', function(e) {
   console.log('background directly clicked');
 });
 $(document).on('click', '#button', false);

#background {
  width: 500px;
  height: 500px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="background">
  <div id="button">I am a button!</div>
  <div id="fullscreen-click-bg"></div>
</div>