後ろの要素をクリックさせたい時は「pointer-events」を使おう。
サイトをコーディングしていく際、z方向に何層か重なっていて見え方の順序とクリックの順序を変えたい場合ってありませんか？要素Aと要素Bが重なっていているときに見え方としては上からA→Bの順だけど、クリックした場合はB要素をクリックさせたい、というよう場合です。
具体的には下記のようなデザインの時ですね。見え方としてはボタニカル柄が前面にあるけど、クリックした場合は後ろのスライダーをクリックさせたいような場合です。
※下記例ではスライダー画像にはページトップへのリンクが付いており、前面に配置されているボタニカル柄の画像にはリンクが設定されていません。
そんな時はこのCSSでお手軽に実現できます。
「pointer-events: none;」
このCSSプロパティを前面の要素(上記の例でいえばボタニカル柄の要素)に使うことでその要素のクリック・タッチを無効にして後ろの要素をクリック・タッチさせることが可能となります。
このCSSプロパティを知らなかったときは、後ろの要素をクリックさせるためだけにjsを組んだりとややこしいことをしていましたのでこのCSSプロパティを知ったときは目からうろこでした。
IE10以下は未対応のため、古いブラウザをサポートしなければならない場合は使うことができませんがそうでない場合は非常に役に立つCSSプロパティです。
設定の有無による動きの違い
以下の2つは両方とも画像の上に文章が重なっており、文章にはそれぞれリンクが設定してあります。1つ目は「pointer-events: none;」が設定してあり、2つ目は設定していません。
実際に文章にカーソルを合わせると違いが分かりやすいと思います。
pointer-eventsはこんなことにも応用できます。
このCSSプロパティは要素が重なったとき以外にも、
- 右クリックによる画像保存を防ぐこと
- PC版の電話番号のリンクを無効化すること
などに応用することができます。
特にレスポンシブWEBデザインを使用している場合、電話のリンクをPC版だけ無効にするのはユーザーエクスペリエンスの観点からもおすすめですのでぜひ試してみてください。
実際にやる場合はcssに以下を記載すれば実現できます。
※メディアクエリのブレイクポイントはサイトに応じて適宜変更してください。
PC版サイトの電話リンク無効のサンプル
/* PC版(768px以上の場合) */
@media (min-width: 768px) {
/* hrefが「tel:」から始まるa要素 */
a[href^="tel:"] {
pointer-events: none;
}
}
注意点としてクリックやタッチは無効になりますが、キー操作は無効になりません。
具体的な例を挙げるとTabキーでフォーカス合わせてEnterキーを押下するとリンクなどが動作してしまいます。最初のスライダーの例などでは関係ありませんが、使う場合はこちらも頭に入れておいたほうがよいでしょう。
また、単純にその要素を触らせたくない場合は
「tabindex="-1"」
「-webkit-touch-callout: none;」
「user-select: none;」(実際に使う場合はベンダープレフィックスが必要)
などと併用するといいのかもしれません。
話はそれましたが、要素が重なっているときのクリックを制御したい場合には「pointer-events: none;」がおすすめですので是非使ってみてください。
