Question

我有父div和里面的孩子div（很多）。父div使用click事件添加了addEventListener。但当我点击里面的孩子div那个也是事件发射。我想阻止那些事情。

示例我有一个父div和B子div。当我点击一个div时，只需要添加一些逻辑（在b div中获取内容），当我点击B div时不要做任何事情。

＆＃13;

var content= document.querySelector('.test-content');
    content.addEventListener('click', function(evt) {
      var check = this.querySelector('.testClass');
      alert("fired");
      evt = evt || window.event;
      stopPropagation(evt);    
    });
    
 function stopPropagation(evt) {
    if (typeof evt.stopPropagation == "function") {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
  }

＆＃13;

<div class="test-content" style="width:100%;height:200px;background-color:yellow" >This is Div A
<div style="width:20%;height:100px;background-color:red"> This is Div B
 <div class="testClass" > test</div>
</div>
</div>

＆＃13;

Answer 1

在继续进行之前，只需检查是否evt.target != this。

<强>演示

var content= document.querySelector('.test-content');
    content.addEventListener('click', function(evt) {
      if ( evt.target != this ) return false; //notice this line
      alert("fired");
      evt = evt || window.event;
      stopPropagation(evt);    
    });
    
 function stopPropagation(evt) {
    if (typeof evt.stopPropagation == "function") {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
  }

<div class="test-content" style="width:100%;height:200px;background-color:yellow" >This is Div A
<div style="width:20%;height:100px;background-color:red"> This is Div B</div>
</div>

div与onclick里面的另一个div点击也开火了

1 个答案: