Question

我有一个#container和按钮，它们是这个容器的子代。当我点击容器本身（按钮周围的空白区域）时，我希望它改变它的背景颜色，但是当我点击按钮时我什么都不想发生。

在jquery中选择#container，点击按钮也会改变bg ...

<div id="container">
   <div class="button>
      <span class="text">Button 1</span>
   </div>
   <div class="button>
      <span class="text">Button 2</span>
   </div>
</div>

$("#container").click(function() {
   $('#container').css({background: 'blue'});
});

我尝试了很多东西，似乎没有任何工作。

Answer 1

检查事件的原始目标：

$("#container").click(function(event) {
   if(event.target === this) {
       $('#container').css({background: 'blue'});
   }
});

参考：event.target

Answer 2

单击时检查ID，因此您不会选择按钮。

$("#container").click(function(event) {
   if(event.target.id === "container") {
       $('#container').css({background: 'blue'});
   }
});

Answer 3

~~更简单~~另一种解决方案：

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

选择父级，在click（）时排除其他所有内容

3 个答案: