パソコンでのクリックやスマホでのタッチを無効化するpointer-eventsに驚いた
2019/01/25 Fri.
グーグル地図のような機能的なコンテンツをブログやサイトに貼り付けたとき、マウスのスクロールボタンでページを上下させてるときに突然地図がズームインして驚くことがあります。
それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にするCSSがあることを知りました。
pointer-events: none;
です。
これだけで石化します。
もうJavaScriptもいりません。
APIを使わず、簡易的に地図を表示したいだけの時には、このCSSが便利です。
※ブラウザが対応していないとだめです。
Chrome、Firefox、iPhone5のsafariで動作確認できました。
Chrome、Firefoxはまさに完璧な石化状態でしたが、safariは通常の画像のような動きをしました。
一応タッチ機能やズームなどは機能しないのですが、ピンチ操作をすると画像が拡大縮小するような動きをします。
【使用例】
<iframe style="pointer-events: none;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d104118.68078739633!2d138.66097155029453!3d35.362873083187765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDIxJzQ2LjMiTiAxMzjCsDQzJzUxLjYiRQ!5e0!3m2!1sja!2sjp!4v1548411225836" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にするCSSがあることを知りました。
pointer-events: none;
です。
これだけで石化します。
もうJavaScriptもいりません。
APIを使わず、簡易的に地図を表示したいだけの時には、このCSSが便利です。
※ブラウザが対応していないとだめです。
Chrome、Firefox、iPhone5のsafariで動作確認できました。
Chrome、Firefoxはまさに完璧な石化状態でしたが、safariは通常の画像のような動きをしました。
一応タッチ機能やズームなどは機能しないのですが、ピンチ操作をすると画像が拡大縮小するような動きをします。
【使用例】
<iframe style="pointer-events: none;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d104118.68078739633!2d138.66097155029453!3d35.362873083187765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDIxJzQ2LjMiTiAxMzjCsDQzJzUxLjYiRQ!5e0!3m2!1sja!2sjp!4v1548411225836" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
- 関連記事
category: HTML・CSS
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
