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でできると思っていなかったので同じことが無いように覚えておきたいところ。
関連記事
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法
特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...
-
-
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...