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

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

HTML では、擬似要素は実際には存在せずに、要素のスタイル機能と視覚機能を拡張します。 DOM ツリー。これは、特に擬似要素上でクリック イベントを検出しようとする場合に問題になります。

次の HTML と CSS を考えてみましょう。

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

p {
    position: relative;
    background-color: blue;
}

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

この例では、

要素には、右端を越えて伸びる赤い疑似要素があります。目標は、青い四角形ではなく、赤い領域でのみクリック イベントをトリガーすることです。

解決策

残念ながら、イベントを疑似オブジェクトに直接バインドすることはできません。 -要素は DOM ツリーの一部ではないためです。クリック ハンドラーは親要素にのみバインドできます。

目的の機能を実現するには、次の回避策が必要です。

の直後に配置します。タグ。CSS スタイルを p:before ではなく .p span に適用します。クリック ハンドラーを .p span 要素にバインドします。このアプローチは基本的に疑似要素の動作をシミュレートしながら、特定の対象領域でのイベント処理を可能にします。

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