イベントのバブリングを効果的に停止するための 5 つの一般的なテクニック-jsチュートリアル-php.cn

イベントのバブリングを効果的に停止するための 5 つの一般的なテクニック

WBOY

リリース： 2024-01-13 09:36:06

オリジナル

1361 人が閲覧しました

イベントのバブリングを効果的に停止するための 5 つの一般的なテクニック

イベントのバブリングを完全に防ぐための 5 つの一般的な方法、具体的なコード例が必要です

イベントのバブリングは、フロントエンド開発における一般的な問題です。イベントがトリガーされると、イベントが泡立ち、要素階層に沿って内側から外側に伝播し、望ましくない結果につながる可能性があります。この問題を解決するために、この記事ではイベントのバブリングを完全に防ぐためによく使用される 5 つの方法を紹介し、具体的なコード例を示します。

stopPropagation() メソッド
stopPropagation() メソッドは、イベントのバブリングを防ぐために最も一般的に使用されるメソッドであり、すべての主要なブラウザでサポートされています。コード例は次のとおりです。
```
document.getElementById("element").addEventListener("click", function(event) {
  event.stopPropagation();
});
```
ログイン後にコピー
addEventListener() のキャプチャパラメータ
addEventListener() メソッドの 3 番目のパラメータでは、処理するイベントのキャプチャフェーズまたはバブリングフェーズを指定できます。行事。キャプチャパラメータが true に設定されている場合、イベントはバブリングフェーズではなくキャプチャフェーズで処理されます。コード例は次のとおりです。
```
document.getElementById("element").addEventListener("click", function(event) {
  // 处理事件的代码
}, true);
```
ログイン後にコピー
e.stopPropagation() メソッド
jQuery または他のライブラリを使用する場合、e.stopPropagation() メソッドを使用してイベントが発生しないようにすることができます。泡立っている。コード例は次のとおりです。
```
$("#element").click(function(e) {
  e.stopPropagation();
});
```
ログイン後にコピー
return false
イベントハンドラー関数で return false を使用すると、イベントのバブリングも防止できますが、このメソッドはデフォルトのバブリングも防止することに注意してください。行動。コード例は次のとおりです。
```
document.getElementById("element").onclick = function() {
  // 处理事件的代码
  return false;
};
```
ログイン後にコピー
イベント委任の使用
イベント委任は、イベントを親要素にバインドし、イベントを判断して対応するイベントを処理できる一般的な最適化手法です。ソースイベント。これにより、イベントが各子要素にバインドされることが回避され、イベントのバブルアップが効果的に防止されます。コード例は次のとおりです。
```
document.getElementById("parentElement").addEventListener("click", function(event) {
  if (event.target.id === "childElement") {
 // 处理事件的代码
  }
});
```
ログイン後にコピー