方法
このサイトより、
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;
}