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').click(function(e) {
    e.stopPropagation();
});

Answer 2

检查目标

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者您可以使用on安排处理并传递false

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

背景点击事件适用于所有事情 - 修复？

2 个答案: