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;
}
注意点
便利なプロパティではありますが注意点があります
- IE10以下には効かない
- 画像保存の回避は、100%ではないこと
- キーイベントでは、無効化されずTabキー+Enterキーではリンクページに移動します
- jQueryや、javascriptとの連携はしっかり行う。
pointer-events: none; が利いているとJavaScript側での指定が思った通りに
動かないという事が起こり得ます。
まとめ
いかがでしたか?
見た目だけ装飾させたいときや、条件下のみ無効化したい時など
使いどころはあるかなと、思います!
個人的には、重ね順が下のものをクリックさせるために使うのが、
1番使われそうなイメージです!