脱力系備忘録BloG ホーム » HTML・CSS »パソコンでのクリックやスマホでのタッチを無効化するpointer-eventsに驚いた

パソコンでのクリックやスマホでのタッチを無効化するpointer-eventsに驚いた  

グーグル地図のような機能的なコンテンツをブログやサイトに貼り付けたとき、マウスのスクロールボタンでページを上下させてるときに突然地図がズームインして驚くことがあります。

それを防ぐため、コンテンツ上でマウス操作やタッチ操作を無効にする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

この記事へのコメント

コメントの投稿

非公開コメント

コメントは全て管理人が内容を確認してから表示されます(非公開コメント除く)。
内容によっては表示されない場合がありますことご了承願います。

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop