ブラウザ
 Computer >> コンピューター >  >> ソフトウェア >> ブラウザ

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

ブラウザには、さまざまなイベントに対するデフォルトの相互作用と動作があります。

たとえば、ユーザーがフォームの「送信」ボタンをクリックすると、フォームはデフォルトで URL に送信されます。

要素の子がクリックされると、メイン コンテナーであるため、要素でもクリック イベントが発生します。

場合によっては、これらのデフォルトをオーバーライドしたいことがあります。この記事では、event.preventDefault() が何であるかを学びます。 と event.stopPropagation() メソッドは、ブラウザで発生するいくつかのデフォルト アクションをキャンセルするためにそれらを使用する方法です。

event.preventDefault()

このメソッドは、イベントがトリガーされたときにブラウザーが行うデフォルトのアクションを防ぎます。

Web ページのデフォルト アクションの例と、event.preventDefault() でそれらをオーバーライドする方法を次に示します。 .

デフォルトのフォーム送信を上書きする方法

ユーザーがフォームを送信すると (送信ボタンがクリックされた場合)、フォームのデフォルト アクションは、データを処理する URL にフォームのデータを送信することです。

フォーム要素には action があります と method フォームを送信する URL とリクエストのタイプを指定する属性 (getpost 、など)、それぞれ。

これらの属性が指定されていない場合、デフォルトの URL はフォームが送信された現在の URL であり、メソッドは get です。 .

たとえば、このコード:

<form>
  <input name="email" />
  <input name="password" />
  <input type="submit" />
</form>

このページを作成します:

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

「dillion」と「password」を入力してフォームを送信すると、get が表示されます。 127.0.0.1:5500/index.html に送信されたリクエスト このように:

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

このアクションは、ブラウザがデフォルトでフォームを処理する方法です。

ただし、リクエストを送信する前に、データに対してさらに多くのことを行いたい場合があります。これは、フォームを処理する今日のアプローチでは特に一般的です。

リクエストを URL に送信する前に、データの検証、データのチェック、処理、ヘッダーの構成などを行う必要がある場合があります。

これらのシナリオでは、フォームの既定のアクションを防止する必要があります。方法は次のとおりです:

<form id='form'>
  ...
</form>
const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  // process data and submit a request manually
})

このようにして、フォームの送信はあなたの手に委ねられます。

リンクをクリックすると (アンカータグ a href で 属性)、デフォルトのアクションは、クリックされたリンクへのブラウザーでのナビゲーションです。

そのアクションをインターセプトして、ナビゲーションの前に何かをしたい場合はどうしますか?たとえば、ユーザーが移動先のページにアクセスできることを確認します。その方法は次のとおりです。

<a id="link" href="https://google.com">Google</a>
const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // do something and navigate
})

あなたはそれをテストすることができます。 「Google」リンクをクリックしても、ナビゲーションは行われません。これは、デフォルトのナビゲーション アクションを禁止しているためです。ここで、ナビゲーションを自分で処理する必要があります。

event.stopPropagation()

伝播とは、何か (この場合はイベント) を広める行為です。 stopPropagation メソッドは、要素でイベントがトリガーされたときにイベントの拡散を防ぐために使用されます。

JavaScript では、要素でイベントをトリガーすると、ツリーがその要素の親と祖先にバブル アップします。基本的に、イベントを持つ要素は親のコンテナーの「内側」にあるため、親もイベントを受け取ります。

これをよりよく説明するために、例を使用します。

要素の子をクリックする

次の要素があるとします:

<div>
  <button>Click me</button>
</div>

button をクリックすると 、あなたは div もクリックしています ボタンがコンテナー内にあるためです。このロジックは、クリック イベントがボタンからコンテナーに伝播し、イベントがルートに到達するまですべての祖父母に広がり続けることを意味します。

これを確認するために、このコードでこれがどのように機能するかを説明します:

<div id="div">
  <button id="button">Click me</button>
</div>
const div = document.getElementById('div')
const button = document.getElementById('button')

button.addEventListener('click', () => {
  console.log('button clicked')
})

div.addEventListener('click', () => {
  console.log('div container clicked')
})

これをブラウザで実行してボタンをクリックすると、次の結果が得られます:

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

div コンテナもクリック イベントを受け取るため、クリック コールバック関数も呼び出されます。

イベントの伝播は、イベントと要素のデフォルトの動作ですが、場合によっては、一部の動作が必要ない場合があります。多くの例の中から 1 つを紹介します。

Gmail の新しいメッセージ ポップアップは次のとおりです。

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

上部には、3 つのアクション ボタンがあります。 1 つはポップアップを最小化し、1 つはポップアップを全画面表示にし、もう 1 つはポップアップを閉じます。

ただし、「新しいメッセージ」テキストを含む上部バーにもクリック ハンドラーがあるため、クリックするとポップアップが最小化されます。

event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

ここで避けたいことの 1 つは、いずれかのボタンをクリックしたときに、クリック イベントがトップ バーに伝播されないようにし、そのイベントの関数も実行しないようにすることです。つまり、たとえば、閉じるボタンをクリックしたときに、トップ バーも最小化したくないということです。

このような場合、伝播を停止します。

ポップアップが次のように構築されているとしましょう:

<div id='top-bar'>
  <!-- The Message Element -->
  <!-- The Buttons -->
</div>
const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')

topBar.addEventListener('click', () => {
  // minimize or maximize popup
})

closeButton.addEventListener('click', () => {
  // close popup
})

stopPropagation も追加する必要があります メソッドをボタンのリスナーに渡して、イベントがトップバーに広がるのを防ぎます。そのためには、ボタンのリスナーを次のように更新します:

closeButton.addEventListener('click', (event) => {
  event.stopPropagation()
  // close popup
})

これにより、トップバーは直接クリックされた場合にのみクリック イベントを受け取ります。

まとめ

event.preventDefault() の違い と event.stopPropagation() 前者はブラウザによって行われるデフォルトのアクションを防ぎますが、後者はイベントのデフォルトの動作を防ぎます – ツリーを上に伝播します.

これらの既定のアクションと動作は間違いではなく、コーディング中に気にする必要はありません。しかし、この記事の例で見たように、それらをオーバーライドしたいシナリオがあります。


  1. Microsoft Edge で閲覧データを管理および削除する方法

    Microsoft は、Windows 10 のリリースに伴い、Internet Explorer を Edge に置き換えました。Microsoft Edge は、ハード ドライブに保存されているものを分類するため、非常に優れたブラウザーです。資格情報、Cookie、キャッシュなどを保存します。さらに、Edge は、ポップアップ ウィンドウを許可するサイトのリストや、Web 上の特定の種類のストリーミング コンテンツにアクセスできるようにするデジタル著作権管理 (DRM) データなど、ブラウジング セッションや設定に固有のアイテムを保持します。これらの機能は、より良いブラウジングを体験するた

  2. Cookie とともに Edge ブラウザのキャッシュをクリアする方法

    Edge のキャッシュをクリアする方法をお探しですか?インターネットを閲覧してウェブサイトにアクセスすると、キャッシュと Cookie がバックグラウンドで自動的に作成され、ハードディスクに保存されます。これはすべてのブラウザーで発生し、ある意味では、このプロセスは以前にアクセスしたものの読み込みを 2 回目に高速化するのに役立ちます。ただし、キャッシュと Cookie にはいくつかの制限があり、そのうちの 1 つにより、Web ページに新しいコンテンツを読み込むことができなくなります。考えられる最善の解決策は、キャッシュと Cookie を定期的にクリアすることです。この記事では、Edge