ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。