勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法

  CSS

ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコードを確認したところ原因の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のdisplayについて
CSSのdisplayについて

よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...