Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

iPhone Safariでimg要素の3DTouchを無効にし、かつ長押しで保存できるようにする

More than 1 year has passed since last update.

方法

このサイトより、

Safari 10 からは touchforcechange という独自のイベントが新たに追加されており、強度の変化だけを取得できる。

らしいです。

このイベントを利用し、3DTouchが反応する押し込みの強度でe.preventDefault()を実行し、長押しの有効と3DTouchの無効を両立します。

押し込みの強度はe.touches[0].forceで取得できます。

実装

検証した結果、e.touches[0].forceが0.1775あたりで3DTouchが反応するので、0.15より上の場合無効にします。

pure js

// 全てのimgタグに対して実行
document.querySelectorAll("img").forEach(el => el.addEventListener("touchforcechange", e => {
  if (!e.touches || !e.touches[0]) return

  if (e.touches[0].force > 0.15) {
    e.preventDefault()
  }
}))

jquery

// 全てのimgタグに対して実行
$("img").on("touchforcechange", e => {
  if (!e.touches || !e.touches[0]) return

  if (e.touches[0].force > 0.15) {
    e.preventDefault()
  }
})

vue + ts

<template>
  <div>
    <img src="hogehoge" alt="hogehoge" @touchforcechange="handleImageTouch">
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"

@Component({})
export default class VHoge extends Vue {
  handleImageTouch(e: TouchEvent) {
    if (!e.touches || !e.touches[0]) return

    if (e.touches[0].force > 0.15) {
      e.preventDefault()
    }
  }
}
</script>

補足

3DTouchと長押し両方とも無効化する場合はcssで指定できます。

img {
  -webkit-touch-callout: none;
}

参考

katsuya_U
TypeScriptが好き
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away