CSSのpointer-events: noneがIEで効かない場合の対処法!

CSSのpointer-events: noneとすることでマウスポインターでのクリックを無効にできますが、IEでこの設定が効かない場合があります。その対処法についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1CSSのpointer-events: noneがIEで効かない
  2. 2CSSのpointer-events: noneがIEで効かない場合の対処法

CSSのpointer-events: noneがIEで効かない

CSSのpointer-eventsプロパティはポインターイベントの発生の対象を制御するプロパティで、例えばaタグにpointer-events: noneを設定するとマウスでクリックやホバーができないようになります。

例えば上記のサンプルコードのプレビューの「リンク」をマウスでクリックしても遷移しないはずです。これはCSSでpointer-events: noneが設定されているためです。

あわせて読みたい
pointer-events
CSSのpointer-eventsプロパティはポインターイベントの発生の対象を制御するプロパティです。pointer-eventsプロパティの構文や使い方をサンプルコード付きで解説します。

しかしpointer-events: noneを設定してもIEでは時にそのままクリックできてしまう問題が発生することがあります。

今回はIEでpointer-events: noneが効かない場合の対処法をサンプルコード付きで解説します。

CSSのpointer-events: noneがIEで効かない場合の対処法

さて、IEでpointer-events: noneが効かない問題ですが、多くの場合でdisplayプロパティがinline-blockblock以外に設定されているために起こります。

そのため対処法としてはdisplayプロパティをinline-blockなどに設定しましょう。

上記のサンプルコードではa要素のdisplayプロパティでinline-blockを指定しています。これでpointer-eventsプロパティが効くはずです。

またもしも、ただリンク禁止にしたいという場合であればa要素以外の他の要素を使うか、慣習的に利用されるvoid(0)なども選択肢になってきます。他の選択肢も検討してみましょう。

あわせて読みたい
JavaScript: void(0)の意味とは?代替手段も紹介!のイメージ
JavaScript: void(0)の意味とは?代替手段も紹介!
aタグのhref属性に設定されているJavaScript: void(0)の意味について解説します。またリンクを無効化させるvoid(0)の代替手段についてもサンプルコード付きで解説します。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次