イベントの伝播をとめる : JavaScript
JavaScriptのイベントは親要素へ伝播していきます[1]。
これをイベント伝播(バブルリング)と呼びます。
親要素へのイベントの伝播を停止する方法はFirefoxはイベントリスナーの引数として渡されるイベントオブジェクトのstopPropagationプロパティをtrueに設定します。
IEの場合window.event.cancelBubbleプロパティをtrueに設定します。
<html>
<head>
<script type="text/javascript">
var listener = function (e) {
alert('p要素');
if (e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
window.onload = function () {
var elm = document.getElementById('sample');
addEvent(elm,'click',listner,false);
}
</script>
</head>
<body>
<div onclick="alert('div要素');">
<p id="sample"><span id="alert('span要素');">伝播をとめる</span></p>
</div>
</body>
</html>
span要素をクリックして発生したonclickイベントはp要素へ伝播して、そこで伝播を停止します。
1. 正確にはバブリングの前段階として親要素から子要素に向かってイベントが下りてくるキャプチャフェーズがあります。
しかしIEではキャプチャフェーズは無視されます。またFirefoxもイベントリスナーを設定する際に
useCaptureをtrueにした場合にのみキャプチャフェーズにおいてイベントが実行されます。
» イベントリスナー設定方法 : JavaScript
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。