[解決済み】擬似要素のクリックイベントのみ検出する。
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
とバインドする。
関連
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】Vueが定義されていない
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする