キャンセルイベントフロー(cancelBubbleとstopPropagation)
前回は、イベントキャンセルの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>見出し1</h1> <h2>見出し2</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できる。
参考:
- stopPropagation(Firefox系)
http://java.sun.com/j2se/1.5.0/ja/docs/ja/guide/plugin/dom/org/w3c/dom/events/Event.html#stopPropagation() - preventDefault(Firefox系)
http://java.sun.com/j2se/1.5.0/ja/docs/ja/guide/plugin/dom/org/w3c/dom/events/Event.html#preventDefault() - cancelBubble(IE)
http://msdn.microsoft.com/ja-jp/library/cc409795.aspx - returnValue(IE)
http://msdn.microsoft.com/ja-jp/library/cc409956.aspx