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

擬似要素のクリック イベントのみを検出する

DOM 構造に影響を与えずに要素のスタイルを設定するために擬似要素を使用するのが一般的です。ただし、これらの疑似要素にイベント ハンドラーをアタッチする場合、共通の課題が発生します。

問題:

提供されたコード スニペットは、クリックが発生する問題を示しています。親要素がクリックされると、親要素 (青色のビット) と擬似要素 (赤色のビット) の両方でイベントがトリガーされます。目標は、擬似要素でのみクリック イベントを検出することです。

解決策:

残念ながら、イベント ハンドラーを擬似要素に直接アタッチすることはできません。要素は DOM の一部ではないためです。ただし、回避策があります:

1. 子要素を作成する: 疑似要素を使用する代わりに、子要素 (スパンなど) を作成します。
2. 子要素を配置します: 開始

   の直後に子要素を配置します。 tag.

3. 子要素にスタイルを適用する: 疑似要素の代わりに子要素に目的のスタイルを適用します。
4. イベント ハンドラーをアタッチします: イベント ハンドラー (クリックなど) を子要素にバインドします。

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