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でできると思っていなかったので同じことが無いように覚えておきたいところ。
関連記事
-
-
CSSで親子関連のセレクターをネスト(入れ子)で指定する方法
CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...