LoginSignup
19
16

More than 5 years have passed since last update.

iPhone 6s safariの3Dタッチで画像のプレビューが出るのを防ぐ

Last updated at Posted at 2015-10-01

iPhone 6s safariで、3Dタッチによる「peek」「pop」というアクションが追加されました。

↓参考
http://gigazine.net/news/20150925-iphone-6s-3d-touch/

html上にimgタグで貼った画像もpeekでプレビュー表示、popでジャンプします。

これがあまり嬉しくない場合もあります。

いろいろ試した結果、img要素にevent listener追加してe.preventDefaultしてやると無効化されることが分かりました。(注:safariのみ確認)

var img = document.getElementById('testimage'); // img要素取得
img.addEventListener('touchstart', function(e) {
    e.preventDefault();
});

追記(注意!!!):
preventDefaultするとその画像上をフリックしたときのスクロールも無効化されるので要注意!

追記その2:
コメントで、styleで無効化できることを教えていただきました!

.disable-3d-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

まさにコレが求めていたものです!\(^o^)/
ありがとうございました!

19
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
16