親ではなく、疑似要素上でのみクリック イベントを検出するにはどうすればよいですか?

擬似要素上のクリック イベントの検出

質問:

疑似要素 (この場合は赤いオーバーレイ) のイベント リスナーをクリックすると、イベントは次のようになります。メイン要素 (青色の背景) でもトリガーされます。目的は、クリック検出を擬似要素のみに分離することです。

回答:

提供された JavaScript フィドルの赤いオーバーレイなどの擬似要素は、ドキュメント オブジェクト モデル (DOM) の一部ではありません。したがって、イベント バインディングを直接受け取ることはできません。この状況では、クリック イベントは親要素 (青色の背景) に関連付けられています。

赤色の領域に対してのみクリック イベント ハンドラーをアクティブにするには、その中にスパンなどの子要素を作成する必要があります。メイン要素とそれに応じたスタイルの適用。この子要素は、疑似要素ではなく、クリック イベントのターゲットとして機能します。

この戦略を採用することで、クリック イベントを目的の領域に分離し、インタラクションに応答するという特定のニーズに応えることができます。包含する要素に影響を与えずに疑似要素を作成します。

以上が親ではなく、疑似要素上でのみクリック イベントを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。