Question

我正在尝试仅在单击外部div时才运行函数。当我点击内部div时，什么都不会发生。

HTML：

<div class="outer">
  <div class="inner"></div>
</div>

的CSS：

.outer {
  background: #ddd;
  width: 200px;
  height: 200px;
}

.inner {
  background: #aaa;
  width: 100px;
  height: 100px;
}

jquery的：

$('div').on('click',function(e){

  if($(e.currentTarget).hasClass('inner')){
      // don't do anything
      console.log("don't run");
  }

  if($(e.currentTarget).hasClass('outer')){
      // do something
      console.log("run");
  }
});

Answer 1

我需要.stopPropagation（）;

所以最终看起来像这样：

$('div').on('click',function(e){

  e.stopPropagation();

  if($(e.currentTarget).hasClass('inner')){
      // don't do anything
      console.log("don't run");
  }

  if($(e.currentTarget).hasClass('outer')){
      // do something
      console.log("run");
  }
});

Answer 2

两种方法：

（1）将点击处理程序附加到外部和内部，并使内部点击处理程序调用{{1}}：

event.stopPropagation()

DEMO

（2）将一个点击处理程序附加到外部，但要检查点击是否从内部（或内部的后代）向上传播：

$('.outer').click(function(){
    // Code here is executed when outer is clicked, but not inner.
}).find('.inner').click(function(event){
    event.stopPropagation();
});

DEMO

注意：上述两种方法都处理用户点击内部div的后代或外部div的后代的情况。

如何使用jQuery选择内部div？

2 个答案: