恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【CSS】pointer-eventsでクリックイベントを無効化する

投稿日:




pointer-events

クリック・タッチイベントを無効化するcssプロパティです。
aタグや、画像などクリックされたくないときに便利です。
デモでは、画像の下に配置された、aタグをクリックさせるために、
画像に、pointer-eventsをかけています!

記述方法

id名または、クラス名{
            pointer-events :  none;
        }

初期値は「auto」になってます。
ほかにもいろいろとありますが、「auto,none」以外はSVGに関係してくるので
基本は、気にしなくても問題ないと思います!
気になる方は、こちらから調べてみてください。

使用例

使用例はいくつかあると思いますが、私が思いついたのは3つです。

1.リンクのクリック、画像の保存を回避する
2.メディアクエリで条件下でのみクリック・タップイベント無効化させる
3.DEMOページのような重ね順が下のものをクリックさせる

1.リンクのクリック、画像の保存を回避する

コードは簡単です。

<a href="###" style="pointer-events: none;">無効化</a>
<img src="###" alt="" style="pointer-events: none;">

2.メディアクエリで条件下でのみクリック・タップイベントを無効化

例では、640px以下の時、クリック・タップイベントを無効化します

@media (max-width: 640px){
        id名または、クラス名{
            pointer-events:none;
        }
    }

3.重ね順が下のものをクリックさせる

下記、DEMOページ作成時のコードです

例)HTML

<div class="demo">
<a href="#">クリック・タッチイベント</a>
<img src="#" alt="">
</div>

例)CSS

.demo{
position: relative;
text-align: center;
}
img{
pointer-events: none;
position: absolute;
top: -5px;
left: 0;
right: 0;
margin: 0 auto;
}

注意点

便利なプロパティではありますが注意点があります

  1. IE10以下には効かない
  2. 画像保存の回避は、100%ではないこと
  3. キーイベントでは、無効化されずTabキー+Enterキーではリンクページに移動します
  4. jQueryや、javascriptとの連携はしっかり行う。
    pointer-events: none; が利いているとJavaScript側での指定が思った通りに
    動かないという事が起こり得ます。

まとめ

いかがでしたか?
見た目だけ装飾させたいときや、条件下のみ無効化したい時など
使いどころはあるかなと、思います!
個人的には、重ね順が下のものをクリックさせるために使うのが、
1番使われそうなイメージです!




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

kawasaki

kawasaki

webデザイナー、まだまだ勉強中です…