ほりくり@ほりでぃWebクリエーター

onClickイベントで要素が重ねっているときに上の要素まで反応してしまう時の対応

投稿日:2014年1月22日


<div id="wrapper">
	<div id="inner"></div>
</div>

上記のような場合、wrapperのクリックイベントがあると
innerをクリックしてもイベントが発生してしまう。

[Javascript]内側のHTML要素をクリックした時に、外側のHTML要素もクリックされたことになる動作を防ぐ

イベントを発生させたくない場合、e.stopPropagationを実行させる。


window.onload = function() {
	document.getElementById("wrapper").onclick = function () {
		//ここにイベント内容
	  return false;
	}
	document.getElementById("inner").onclick = function(e){
        e.stopPropagation();
    }
}