1. ホーム
  2. ジャバスクリプト

[解決済み】擬似要素のクリックイベントのみ検出する。

2022-04-01 03:21:39

質問

こちらのフィドルをご覧ください。 http://jsfiddle.net/ZWw3Z/5/

私のコードは

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

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

擬似要素(赤いビット)のみにクリックイベントを発生させたいのですが、どうすればいいですか?つまり、青ビットにはクリックイベントを発生させたくないのです。

どのように解決するのですか?

疑似要素は DOM の一部ではないので、イベントを直接バインドすることはできず、その親要素にのみバインドすることができます。

もし、赤い領域だけにクリックハンドラを持たせたい場合は、子要素である span の直後に配置します。 <p> タグにスタイルを適用し p span の代わりに p:before とバインドする。