イベントはstopPropagationであっても親にバブリングしていますか？

Question

ストップ伝播は親要素へのバブリングを止めることを目的としたものではありませんか？

この場合、イベントターゲットを確認することがわかっていますが、この問題のみを防ぐための単語stopPropagationがなぜこのように実行されるのか不思議です。

https://jsfiddle.net/hzo9eq9m/

var child = document.querySelector('.parent') 
 
    .addEventListener('click',function(e){ 
 
     e.stopPropagation(); 
 
     $(this.querySelector('.child')).toggleClass('selected'); 
 
     console.log(e); 
 
    }, 
 
false);

.society { 
 
    padding:10px; 
 
    background-color:green; 
 
    position:relative; 
 
} 
 

 
.parent { 
 
    background-color:red; 
 
    width:60%; 
 
    margin-left:30%; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    background-color:pink; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:0; 
 
    max-width:0px; 
 
    max-height:0px; 
 
    transition: max-width 1s, max-height 1s; 
 
    overflow:hidden; 
 
} 
 

 
.child.selected { 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    max-width:1000px; 
 
    max-height:1000px; 
 
}

<div class="society"> 
 
    <div class="parent"> 
 
    parent 
 
    <div class="child"> 
 
     child 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

.child：

document.getElementById('parent').addEventListener('click', function(e) { 
 
    alert('parent'); 
 
}, false); 
 

 
document.getElementById('child').addEventListener('click', function(e) { 
 
    alert('child'); 
 
    e.stopPropagation(); // if this isn't called, you'll get 2 alerts when clicking on #child 
 
}, false);

#parent { background-color: yellow; } 
 

 
#child { background-color: red; }

<div id="parent"> 
 
    Parent 
 
    <div id="child"> 
 
    Child 
 
    </div> 
 
</div>

Answer 2

はい、それはそれはまったく同じものです！

あなたのコードは、親クラスを持つ要素のクリックをリッスンし、選択されたクラスを子クラスのすべての要素に切り替えます。これは意図ではありませんか？

あなたは考えていない火、のstopPropagationを持つ子の親クリックイベントを追加する場合：あなたが伝播するから.childのクリックを防止したい場合、あなたは上のclickハンドラをバインドする必要があると思います

var parent = document.querySelector('.parent').addEventListener('click',function(e){ 
    e.stopPropagation(); 
    $(this.querySelector('.child')).toggleClass('selected'); 
    console.log(e); 
},false); 
var child = document.querySelector('.child').addEventListener('click',function(e){ 
    e.stopPropagation(); 
    $(this).toggleClass('selected'); 
    console.log(e); 
},false);