jQueryのデフォルトイベントのブロック解除

jQuery のデフォルト イベントのブロック解除

フロントエンド開発では、デフォルトのイベント動作は、DOM イベントに付属する特別な動作です。たとえば、a タグをクリックすると、対応するリンクにジャンプします。 。顧客が特定の動作を必要とする場合、開発者は顧客のニーズを達成するためにイベントのデフォルト動作を防ぐ必要があります。特定の時点で、イベントをブロックするデフォルトの動作を解除する必要があります。この記事では、jQuery がイベントをブロックするデフォルトの動作のブロックを解除する方法を紹介します。

1. デフォルトの動作

イベント処理には特別な動作があり、これがデフォルトの動作です。たとえば、 a タグのデフォルトの動作は対応するリンクにジャンプし、フォーム送信の動作はフォームをバックエンド サーバーに送信し、右クリック メニューのデフォルトの動作は独自のメニューをポップアップします。等デフォルトの動作は、開発者の特定のニーズを満たすためにブロックまたは変更されることがよくあります。

2. イベント ブロック

イベント ブロックの機能は、イベントのデフォルト動作を防止することです。 JavaScript イベントは通常、キャンセル、停止、またはブロックできます。イベントのデフォルト動作は、event.preventDefault() メソッドを使用して防止できます。次の例を参照してください。

<a href="https://www.example.com" id="example">点击我跳转</a>

$('#example').click(function(event) {
  event.preventDefault();
});

これにより、ハイパーリンクをクリックしたときに、デフォルトの動作で指定されたリンクにジャンプすることがなくなります。

3. ブロックの解除

デフォルトの動作を永久にブロックしたくないが、特定の機能を実現するためにブロックを解除する必要がある場合があります。現時点では、event.stopPropagation() メソッドと event.stopImmediatePropagtion() メソッドを使用して、イベントのデフォルト動作のブロックを解除する必要があります。

event.stopPropagation() メソッドは、現在のイベントがバブリング プロセスから親要素に伝播するのを防ぐことができます。ただし、現在の要素の他のイベント リスナーには影響しません。

event.stopImmediatePropagation() このメソッドは、現在のイベントがバブリング プロセスから親要素に伝播するのを防ぐこともできます。ただし、event.stopPropagation() とは異なり、現在の要素の他のイベント リスナーもブロックします。

次の例を参照してください:

<div id="parentNode">
  <p id="childNode">点击我</p>
</div>

$('#childNode').on('click', function(event) {
  event.stopImmediatePropagation();
  console.log('子元素的点击事件')
});

$('#parentNode').on('click', function(event) {
  console.log('父元素的点击事件')
});

上記のコードでは、クリック イベントを子要素と親要素にそれぞれバインドし、event.stopImmediatePropagation() を使用します。メソッドは、子要素のイベントのデフォルト動作を防ぎます。子要素をクリックした場合は「子要素のクリックイベント」のみが出力され、親要素をクリックした場合は「子要素のクリックイベント」と「親要素のクリックイベント」が出力されます。出力。

4. 概要

イベントのデフォルト動作は、DOM イベントに付属する特別な動作であり、イベントのデフォルト動作を妨げる可能性があります。特定のケースでは、特定の機能を実現するためにイベントのデフォルト動作のブロックを解除する必要があります。 jQuery は、event.stopPropagation() メソッドと event.stopImmediatePropagation() メソッドを使用して、特定のニーズを満たすためにイベントのデフォルトの動作を緩和します。

以上がjQueryのデフォルトイベントのブロック解除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。