CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法
ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコードを確認したところ原因の1つとしてjQueryの記述の問題があり、そちらを直してみても動かないということがあった。他にJS / jQueryでイベントは指定していなかったので何だろうと思いきやCSS側の問題っぽい。以下に原因と対応方法をメモ。
原因と対応方法
当該ボタンに対してCSSで「pointer-events: none;」指定されている点が原因だった。
そのため「pointer-events: auto;」指定にするか、pointer-eventsプロパティ部分を削除することで解決した。
リファレンス
pointer-events
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
所感
CSSに関しては何も触っていなかった上にpointer-eventsというプロパティは知らなかったので原因を見つけるのに時間がかかった。
イベントの停止等はCSSでできると思っていなかったので同じことが無いように覚えておきたいところ。
関連記事
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...