回答編集履歴
4
addEventListenerの第三引数を指定\(記入漏れ\)
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### バブリングフェーズ、キャプチャリングフェーズを強制終了
|
|
1
|
+
### バブリングフェーズ、キャプチャリングフェーズを強制終了
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
|
|
117
|
-
### event.target で分岐処理
|
|
117
|
+
### event.target で分岐処理
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
|
|
137
137
|
console.log(event.type, '#' + event.target.id);
|
|
138
138
|
|
|
139
|
-
});
|
|
139
|
+
}, false);
|
|
140
140
|
|
|
141
141
|
```
|
|
142
142
|
|
3
event\.target で分岐処理
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
### バブリングフェーズ、キャプチャリングフェーズを強制終了する
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
イベントの発火を防止するのは原理的に不可能だと思います。
|
|
2
6
|
|
|
3
7
|
バブリングを停止することで上位要素のバブリングフェーズにおいてイベントが発火していないかのように見せかける事は可能です。
|
|
@@ -110,4 +114,32 @@
|
|
|
110
114
|
|
|
111
115
|
|
|
112
116
|
|
|
117
|
+
### event.target で分岐処理する
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
Fushihara さんが期待する動作ではないかもしれませんが、個人的には次のように書きます。
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
```JavaScript
|
|
126
|
+
|
|
127
|
+
document.getElementById('kore').addEventListener('click', function (event) {
|
|
128
|
+
|
|
129
|
+
if (event.target !== event.currentTarget) { // event.target が #kore でないなら強制終了
|
|
130
|
+
|
|
131
|
+
return;
|
|
132
|
+
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
console.log(event.type, '#' + event.target.id);
|
|
138
|
+
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
113
145
|
Re: Fushihara さん
|
2
不要コード削除\(削除漏れ\)
test
CHANGED
|
@@ -80,16 +80,6 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
document.querySelector('#kore *').addEventListener('click', function (event) {
|
|
84
|
-
|
|
85
|
-
event.preventDefault(); // デフォルトアクションを抑止
|
|
86
|
-
|
|
87
|
-
event.stopImmediatePropagation(); // バブリングを停止
|
|
88
|
-
|
|
89
|
-
}, true);
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
83
|
document.getElementById('kore').addEventListener('click', function (event) { // #kore のみ発火する
|
|
94
84
|
|
|
95
85
|
console.log(event.type, 'bubbling-phase', '/ target = #' + event.target.id + ' / currentTarget = #' + event.currentTarget.id);
|
1
typo修正
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
イベントの発火を防止するのは原理的に不可能だと思います。
|
|
2
2
|
|
|
3
|
-
バブリングを停止することで上位要素のバブリングフェーズにおいてイベントが発火していないかの見せかける事は可能です。
|
|
3
|
+
バブリングを停止することで上位要素のバブリングフェーズにおいてイベントが発火していないかのように見せかける事は可能です。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|