div 在另一个 div 中点击 onclick 也触发

Question

我有 parent div 和 child div 里面的（很多）。 Parent div 有带有点击事件的 addEventListener。但是，当我单击 child div 内部时，该事件也会触发。我想阻止那些事情。

示例我有 A parent div 和 B child div。当我点击A时div只需要添加一些逻辑（获取b中的内容div），当我点击B时div什么都不做。

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

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

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 在另一个 div 中点击 onclick 也触发

div with onclick inside another div click also firing

javascript

jquery

stoppropagation