はじめに

Javascriptでアプリ開発していると、なんとなく"予防的"に、preventDefaultとstopImmediatePropagationをコード中で併記する変な癖がついてしまっていました。（違いは理解しているつもりだったのですが、IME関連の処理を書いている時からpreventDefaultが効かなくなったりして混乱してしまったみたい。）

確認用として、これらでキャンセルできるイベントについて整理します。

テスト条件

次のようなHTMLで、contentEditableな要素を含むアプリを想定します。

<html>
<body>
<div id="div0" contentEditable="true">入力欄</div>
</body>
</html>

このHTMLに対して、Javascriptでは次のイベントリスナーを登録しておきます。

const div0 = document.getElementById("div0");
div0.addEventListener("keydown", OnKeydown1, false);
div0.addEventListener("keydown", OnKeydown2, false);
div0.addEventListener("input", OnInput, false);
div0.addEventListener("keyup", OnKeyup, false);
window.addEventListener("keydown", OnKeydownWin, false);
window.addEventListener("keyup", OnKeyupWin, false);

addEventListenerの登録順序も表記の順とします。

さて、これを実行し、要素div0の中でキー入力を行うと、次の順でイベントが発火します。

OnKeydown1
OnKeydown2
OnKeydownWin
OnInput
OnKeyup
OnKeyupWin

これがデフォルトの状況となります。OnKeydownWinとOnKeyupWinはバブリングにあたります。

発火を抑制できるイベント

上記の条件下において、OnKeydown1 イベントの中でpreventDefault、stopPropagation、stopImmediatePropagationのいずれかをcallした場合、2～6のイベントでキャンセルされるものを以下の表記に記載します。×印のついたイベントはキャンセルされ、なにも記述の場合は発火することを意味します。

イベント名	preventDefault	stopPropagation	stopImmediatePropagation
OnKeydown2			×
OnKeydownWin		×	×
OnInput	×
OnKeyup
OnKeyupWin

preventDefaultとstopPropagationもしくはstopImmediatePropagationを併記した場合は、どちらかで×印が付いているイベントはキャンセルされます。

簡単に挙動を纏めると、次のようになります。preventDefaultでキャンセルできるのはデフォルト処理であり、今回のcontentEditableな要素に対してのキー入力では、文字入力がキャンセルされます。よってOnInputがキャンセルされます。一方で、もう一つ登録されたOnkeydown2やバブリングであるOnkeydownWinはキャンセルされずに発火します。また、OnKeyupはkeydownとは独立したイベントとみなされ、キャンセルできません。

stopPropagationはバブリングだけをキャンセルします。よって、OnkeydownWinがキャンセルされます。しかし、 Onkeydown2は同じ要素の同じイベントに登録されたリスナーであってバブリングではないのでキャンセルできません。

Onkeydown2もキャンセルしたい場合にはstopImmediatePropagationを使います。これはバブリングに加えて、同じ要素の同じイベントに続けて登録されたリスナーもキャンセルします。

例外

IME制御は上記が当てはまらない場合があります。詳しくは以前のまとめへ

モダンブラウザにおけるキー入力のキャンセル
モダンブラウザにおけるIME入力検知

さいごに

まとめて思うのは、OnKeydown2だけをキャンセルして、バブルリングのOnKeydownWinは発火させることはできないのだろうか。私の場合は、それがやりたかった為に無意識にコードをこじらせている部分があります。。。