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でできると思っていなかったので同じことが無いように覚えておきたいところ。
関連記事
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...