ネストされたボタン：独立した機能を達成するためにどのように

Question

I持つ親ボタンに追加ボタン：

var parent_button = document.createElement("button"); 
var child_button = document.createElement("button"); 
parent_button.appendChild(child_button); 

私はparent_buttonのものから独立したのですchild_buttonのための機能を作成したい

：

parent_button.onclick = function() { 
    //do stuff 
}; 

child_button.onclick = function() { 
    //do some other stuff 
}; 

しかしこのコードでは、child_buttonをクリックするたびに必ずparent_button.onclick（）を起動しています。どのように2つを分けるのですか？

重複のボタンは、次のようになります。子ボタンのイベントオブジェクトの

Answer 1

使用stopPropagation()。イベントが子から親に伝播するのを防ぎます。

あなたがここでの例を見ることができます：

var pb = document.getElementById("pb"); 
 
var cb = document.getElementById("cb"); 
 
pb.addEventListener("click", function(e) { 
 
    console.log("Parent"); 
 
}); 
 
cb.addEventListener("click", function(e) { 
 
    console.log("Child"); 
 
    e.stopPropagation(); 
 
})

<button id="pb">Parent Button <button id="cb">Child Button</button></button>

注：私は、デフォルトの動作では、あなたが子要素をクリックすると、その子との両方のイベントであることを考えます親がトリガーするはずですが、この例ではこれは起こりません。おそらく、ボタンが親であることに特有のものかもしれません。