div他のdiv内のonclick divも発火クリック

Question

私は親divと子div（多数）を持っています。親divには、clickイベントを伴うaddEventListenerがありました。しかし、私が内部をクリックすると、イベントdivideイベントも発生します。私はそれらの事を止めたい。

例私は親のdivとBの子divを持っています。 私はdivをクリックすると、div 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>