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でできると思っていなかったので同じことが無いように覚えておきたいところ。
関連記事
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
Bootstrap5系でよく使う要素及びClass名のまとめ記事
サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
-
Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等をMaterial Design Liteで作ってい ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...