小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

キャンセルイベントフロー（cancelBubbleとstopPropagation）

WEB

前回は、イベントキャンセルのreturnValueとpreventDefaultでしたが、今回はイベントフローのキャンセルです。
イベントキャンセルがイベントのデフォルト処理をキャンセルするのに対して、イベントフローキャンセルは、イベントが要素の階層毎とにフローしてくのをキャンセルします。


以下は、たとえば、『短い』をクリックするとイベントがdanraku, midashi, bodyとフローしていくのが分かります。
そして、コメントにしてある、cancelBubble（IE) または stopPropagation（Firefox系） を生きにするとフローしなくなるのが確認できます。

<html>
<body onclick="bodyClicked(event.target || window.event.srcElement)">
<div onclick="midashiClicked(event.target || window.event.srcElement)">
    <h1>見出し１</h1>
    <h2>見出し２</h2>
    <p onclick="danrakuClicked(event || window.event)">これは<em>短い</em>文章です。</p>
</div>
<script type="text/javascript">
<!--
function danrakuClicked(evt) {
    if (evt.target) {
        alert("danraku " + evt.target.tagName);
        //evt.stopPropagation();
    }
    else {
        alert("danraku " + evt.srcElement.tagName);
        //evt.cancelBubble = true;
    }
}
function midashiClicked(el) {
    alert("midashi " + el.tagName);
}
function bodyClicked(el) {
    alert("body " + el.tagName);
}
-->
</script>
</body>
</html>

FireFox系は、stopPropagationメソッドでイベントの伝播（Propagation）をStopさせ。
IEは、cancelBubbleプロパティにtrueをセットすると、泡のようなイベント(謎）がcancelできる。


参考：