子要素のクリックイベントが親要素のダブルクリックイベントをトリガーするのを防ぐ方法は？

子要素のクリックと親要素の間の競合を巧みに回避するイベントをダブルクリックします

フロントエンドの開発では、子要素クリックイベントと親要素のダブルクリックイベントとの対立は、多くの場合頭痛です。特に、子要素をすばやくクリックすると、親要素のダブルクリックイベントを誤ってトリガーするのは簡単です。この記事は、この問題を効果的に解決するための2つの方法を提供します。

HTML構造が次のとおりであると仮定します。

<div>
    <div></div>
</div>

対応するイベント処理機能：

 showpreset（event）{
    console.log（ 'aaaaa'）;
}

changefullscreen（）{
    console.log（ 'bbbb'）;
}

Clickイベントとダブルクリックイベントが異なるイベントタイプであるため、簡単なevent.stopPropagation()またはreturn falseこの問題を解決しません。

方法1：子要素に空のダブルクリックイベントを追加する

チャイルドエレメントに空のダブルクリックイベントハンドラーをバインドして、ダブルクリックイベントが泡立つのを防ぎます。

 NOTIONFN（）{}; //空の関数、操作なし// ...他のコード...

子要素のダブルクリックイベントにnothingFnバインドして、ダブルクリックイベントが上向きに泡立つのを防ぐため、親要素のchangeFullScreen関数のトリガーを避けます。

方法2：イベントターゲット要素に基づく判断

イベントバブルメカニズムを使用して、 event.targetをチェックして、ダブルクリックイベントのトリガーソースを決定します。親要素の場合、 changeFullScreenが実行されます。それが子供の要素である場合、それは無視されます。この方法では、イベントのソースを区別できるように、ダブルクリックイベントの処理ロジックを変更する必要があります。

上記の2つの方法により、Child Element Clickイベントは、親要素のダブルクリックイベントをトリガーすることを効果的に防ぐことができ、それによりイベントの競合が回避されます。選択する方法は、特定のプロジェクトの要件とコード構造によって異なります。

以上が子要素のクリックイベントが親要素のダブルクリックイベントをトリガーするのを防ぐ方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。