コード
JavaScript コード
// イベント オブジェクトが提供される場合、これは非 IE ブラウザです
if (e && e.stopPropagation)
//つまり、W3C の stopPropagation() メソッドをサポートします
e.stopPropagation();
それ以外
//それ以外の場合は、IE を使用してイベントのバブリングをキャンセルする必要があります
window.event.cancelBubble = true;
return false;
2. ブラウザのデフォルト動作を防止する
JavaScript コード
// イベント オブジェクトが提供される場合、これは非 IE ブラウザです。
if (e && e.preventDefault)
// デフォルトのブラウザーアクションをブロックします (W3C)
e.preventDefault();
それ以外
//IEで関数のデフォルト動作を防ぐ方法
window.event.returnValue = false;
false を返します。
コード
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
2<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
3<頭>
4<title> JavaScript イベントのバブリングを防止する (cancelBubble、stopPropagation)</title>
5<meta name="keywords" content="JavaScript、イベントバブリング、cancelBubble、stopPropagation" />
6<script type="text/javascript">
7関数 doSomething (obj,evt) {
8alert(obj.id);
9var e=(evt)?evt:window.event;
10if (ウィンドウ.イベント) {
11e.cancelBubble=true;
12} その他 {
13//e.preventDefault();
14e.stopPropagation();
15}
16}
17</script>
18</頭>
19<ボディ>
20<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color: yellow">
21<p>これはparent1 divです。</p>
22<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
23<p>こちらは child1 です。</p>
24</div>
25<p>これはparent1 divです。</p>
26</div>
27<br />
28<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:chan;">
29<p>これはparent2 divです。</p>
30<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
31<p>これは子 2 です。</p>
32</div>
33<p>これはparent2 divです。</p>
34</div>
35</ボディ>
36</html>