javascript - 子 div クリック イベントは、親クリック イベントをトリガーします

Question

子 div がクリックされた場合に親クリック イベントが発生しないようにするにはどうすればよいですか?

http://jsfiddle.net/2GEKu/

var p = document.getElementById('parent');
var c = document.getElementById('child');

p.onclick = function () {
    alert('parent click');
}
c.onclick = function () {
    alert('child click');
}

Answer 1

子のハンドラーでオブジェクトの.stopPropagation()メソッドを呼び出します。event

var p = document.getElementById('parent');
var c = document.getElementById('child');

p.onclick = function () {
    alert('parent click');
}
c.onclick = function (event) {
    event.stopPropagation();
    alert('child click');
}

---

IE8 以前と互換性を持たせるには、次のようにします。

c.onclick = function (event) {
    if (event)
        event.stopPropagation();
    else
        window.event.cancelBubble = true;
    alert('child click');
}