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

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

:before や :after などの疑似要素は、HTML 要素のスタイル機能を強化します。仮想コンテンツの挿入。ただし、これらの仮想要素は DOM の一部ではなく、直接的なイベント処理機能がありません。

指定された例では、赤色の疑似要素 (p:before を使用して作成された) 上でのみクリック イベントを検出することには問題があります。疑似要素は DOM で表現されないため、クリック イベントを疑似要素に直接バインドすることはできません。

解決策:

目的の動作を実現するには、子の使用を検討してください。擬似要素の代わりに要素を使用します。 を作成します。要素を選択し、開始

の直後に配置します。タグ。現在 p:before に適用されているスタイルをこの に適用します。

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>

p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

これで、クリック イベントを 要素にバインドできるようになりました。

注:

擬似要素内の子要素へのイベントのバインドは、すべてのブラウザで一貫してサポートされているわけではありません。ブラウザ間の互換性を最適化するには、イベント処理に疑似要素に依存するのではなく、上記のアプローチを使用することを検討してください。

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