JavaScriptにおける要素への複数のイベントハンドラ
要素に同じイベントに対する複数のハンドラがある場合、
バブリングが停止されても、それらすべてが実行されます。
つまり、stopPropagationはイベントのさらに先への伝播を妨げますが、
現在の要素上では全てのハンドラが動作します。
次の例を確認してください：
elem1.addEventListener('click', function() {
console.log('緑');
});
elem2.addEventListener('click', function(event) {
console.log('青 - 最初のハンドラ');
event.stopPropagation(); // バブリングを停止
});
elem2.addEventListener('click', function() {
console.log('青 - 二つ目のハンドラ'); // それでも実行される
});
elem3.addEventListener('click', function() {
console.log('赤');
});
試してみてください：
