ブラウザのデフォルト動作

多くのイベントは、ブラウザによって自動的に実行される特定の動作につながります。

例えば

• リンクをクリックする – そのURLへのナビゲーションを開始します。
• フォームの送信ボタンをクリックする – サーバーへの送信を開始します。
• テキストの上にマウスボタンを押して移動する – テキストを選択します。

JavaScriptでイベントを処理する場合、対応するブラウザの動作を行わず、代わりに別の動作を実装したい場合があります。

ブラウザの動作を阻止する

ブラウザに動作をさせたくないことを伝える方法は2つあります。

• 主な方法は、`event`オブジェクトを使用することです。`event.preventDefault()`メソッドがあります。
• `on<event>`（`addEventListener`ではない）を使用してハンドラーを割り当てている場合、`false`を返すことでも同じように機能します。

このHTMLでは、リンクをクリックしてもナビゲーションにはつながりません。ブラウザは何もしません。

<a href="/" onclick="return false">Click here</a>
or
<a href="/" onclick="event.preventDefault()">here</a>

次の例では、このテクニックを使用してJavaScript対応のメニューを作成します。

例：メニュー

このようなサイトメニューを考えてみましょう。

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

いくつかのCSSを使用した外観です。

メニュー項目は、ボタン`<button>`ではなく、HTMLリンク`<a>`として実装されています。そうする理由はいくつかあります。例えば

• 多くの人が「右クリック」–「新しいウィンドウで開く」を使用します。`<button>`または`<span>`を使用すると、機能しません。
• 検索エンジンはインデックス作成中に`<a href="...">`リンクをたどります。

そのため、マークアップでは`<a>`を使用します。しかし通常、JavaScriptでクリックを処理することを意図しています。したがって、デフォルトのブラウザアクションを阻止する必要があります。

ここではこのようになります。

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // ...can be loading from the server, UI generation etc

  return false; // prevent browser action (don't go to the URL)
};

`return false`を省略すると、コードの実行後にブラウザは「デフォルトアクション」（`href`のURLへのナビゲーション）を実行します。そして、ここでは自分でクリックを処理しているので、それは必要ありません。

ちなみに、ここでイベントデリゲーションを使用すると、メニューが非常に柔軟になります。入れ子になったリストを追加し、CSSを使用して「下にスライド」させることができます。

<input value="Focus works" onfocus="this.value=''">
<input onmousedown="return false" onfocus="this.value=''" value="Click me">

「パッシブ」ハンドラーオプション

`addEventListener`のオプションの`passive: true`オプションは、ハンドラーが`preventDefault()`を呼び出さないことをブラウザに知らせます。

なぜそれが必要になるのでしょうか？

モバイルデバイスでの`touchmove`（ユーザーが指を画面上で動かしたとき）など、デフォルトでスクロールを引き起こすイベントがありますが、ハンドラーで`preventDefault()`を使用してそのスクロールを阻止できます。

そのため、ブラウザはそのようなイベントを検出すると、最初にすべてのハンドラーを処理してから、`preventDefault`がどこでも呼び出されていない場合、スクロールを続行できます。これにより、UIに不要な遅延と「ちらつき」が発生する可能性があります。

`passive: true`オプションは、ハンドラーがスクロールをキャンセルしないことをブラウザに伝えます。すると、ブラウザは最大限にスムーズなエクスペリエンスを提供するためにすぐにスクロールし、イベントは処理されます。

一部のブラウザ（Firefox、Chrome）では、`touchstart`と`touchmove`イベントでは、`passive`はデフォルトで`true`です。

event.defaultPrevented

`event.defaultPrevented`プロパティは、デフォルトアクションが阻止された場合は`true`、そうでない場合は`false`になります。

それには興味深いユースケースがあります。

チャプターバブリングとキャプチャで、`event.stopPropagation()`について、そしてバブリングを停止することがなぜ悪いのかについて説明したことを覚えていますか？

他のイベントハンドラーにイベントが処理されたことを知らせるために、代わりに`event.defaultPrevented`を使用できる場合があります。

実用的な例を見てみましょう。

デフォルトでは、ブラウザは`contextmenu`イベント（右マウスクリック）で標準オプションを含むコンテキストメニューを表示します。これを阻止し、次のように独自のメニューを表示できます。

<button>Right-click shows browser context menu</button>

<button oncontextmenu="alert('Draw our menu'); return false">
  Right-click shows our context menu
</button>

今度は、そのコンテキストメニューに加えて、ドキュメント全体にわたるコンテキストメニューを実装したいと思います。

右クリックすると、最も近いコンテキストメニューが表示されるはずです。

<p>Right-click here for the document context menu</p>
<button id="elem">Right-click here for the button context menu</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
  };
</script>

`elem`をクリックすると、ボタンレベルと（イベントはバブルアップする）ドキュメントレベルのメニューの2つのメニューが表示されるという問題があります。

どのように修正すればよいでしょうか？解決策の1つは、「ボタンハンドラーで右クリックを処理するときは、そのバブリングを停止する」と考えて`event.stopPropagation()`を使用することです。

<p>Right-click for the document menu</p>
<button id="elem">Right-click for the button menu (fixed with event.stopPropagation)</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
  };
</script>

これで、ボタンレベルのメニューは意図したとおりに機能します。しかし、その代償は大きいです。統計などを収集するカウンターなど、外部のコードに対して右クリックに関する情報を永久にアクセスできなくします。それは非常に賢明ではありません。

別の解決策は、ドキュメントハンドラーでデフォルトアクションが阻止されたかどうかを確認することです。そうであれば、イベントは処理され、それに反応する必要はありません。

<p>Right-click for the document menu (added a check for event.defaultPrevented)</p>
<button id="elem">Right-click for the button menu</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    if (event.defaultPrevented) return;

    event.preventDefault();
    alert("Document context menu");
  };
</script>

これで、すべてが正しく機能します。入れ子になった要素があり、それぞれに独自のコンテキストメニューがある場合も機能します。各`contextmenu`ハンドラーで`event.defaultPrevented`を確認してください。

まとめ

デフォルトのブラウザアクションはたくさんあります。

• `mousedown` – 選択を開始します（マウスを動かして選択します）。
• `<input type="checkbox">`をクリックする – `input`をチェック/アンチェックします。
• `submit` – `<input type="submit">`をクリックするか、フォームフィールド内でEnterキーを押すと、このイベントが発生し、ブラウザはその後にフォームを送信します。
• `keydown` – キーを押すと、フィールドに文字を追加したり、他のアクションを実行したりすることがあります。
• `contextmenu` – 右クリックでイベントが発生し、ブラウザのコンテキストメニューが表示されます。
• …もっとあります…

イベントをJavaScriptだけで処理したい場合は、すべてのデフォルトアクションを阻止できます。

デフォルトアクションを阻止するには、`event.preventDefault()`または`return false`を使用します。2番目の方法は、`on<event>`で割り当てられたハンドラーでのみ機能します。

`addEventListener`の`passive: true`オプションは、アクションが阻止されないことをブラウザに伝えます。これは、`touchstart`や`touchmove`などの一部のモバイルイベントで、スクロールする前にすべてのハンドラーの完了を待たないようブラウザに指示するのに役立ちます。

デフォルトアクションが阻止された場合、`event.defaultPrevented`の値は`true`になり、そうでない場合は`false`になります。