は、私は、イベントバブリングをいじったバブル

Question

内の要素をクリックしチェックし、私は自分自身のために、典型的な3つのdiv要素に互いの運動を作成し、私は私が望んでいたところ、「バブリング」を停止する作業コードとイベントを取得することができました。

私のコードは不格好だったので、私はそれをもう少し簡略化作ってみました。 <div>この場合と文を持っていた、単一の機能にすべての私の<divs>ポイントは、関数を実行して、伝播を停止し、クリックされたが、私は私が道をクリックが間違っている「チェック」と考えていました。持つことにより、

リンク：https://jsfiddle.net/theodore_steiner/t5r5kov0/3/

var d1 = document.getElementById("d1"); 
 
var d2 = document.getElementById("d2"); 
 
var d3 = document.getElementById("d3"); 
 

 
function showme(event) { 
 
    if (d3.onclick == true) { 
 
    alert("hello") 
 
    event.stopPropagation(); 
 
    } else { 
 
    alert("hello"); 
 
    } 
 
}; 
 

 
d1.addEventListener("click", showme); 
 
d2.addEventListener("click", showme); 
 
d3.addEventListener("click", showme);

#d1 { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
#d2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
#d3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<div id="d1"> 
 
    <div id="d2"> 
 
    <div id="d3"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

event.targetとして使用event.target.ideventがinvokedとidされているelementを返しますがありDOMElement

0123のプロパティ

Event.target、イベントを送出するオブジェクトへの参照。 e.target` `について

var d1 = document.getElementById("d1"); 
 
var d2 = document.getElementById("d2"); 
 
var d3 = document.getElementById("d3"); 
 

 
function showme(event) { 
 
    if (event.target.id == 'd3') { 
 
    alert("hello") 
 
    event.stopPropagation(); 
 
    } else { 
 
    alert("hello"); 
 
    } 
 
}; 
 

 
d1.addEventListener("click", showme); 
 
d2.addEventListener("click", showme); 
 
d3.addEventListener("click", showme);

#d1 { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
#d2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
#d3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<div id="d1"> 
 
    <div id="d2"> 
 
    <div id="d3"> 
 
    </div> 
 
    </div> 
 
</div>