画像に強制タッチイベントを防止するが、iOS Safariで長押しイベントを許可する

Question

イメージギャラリーにAppleの強制タッチイベントが発生しないようにする必要がありますが、「画像を保存」吹き出し。 iOSユーザーが画像を長押しして「画像を保存」を選択するように指示していますが、誤って押しすぎてフォースタッチイベントが発生した場合、特に画像が読み込まれた場合は非常に混乱します新しいページに

当初、私はtouchforcechangeイベントを聞いて、その力が一定のレベルに達したときにpreventDefaultと呼ぶことを考えました。このようなもの：

imgEl.addEventListener('touchforcechange', 'onTouchForceChange', false) 

function onTouchForceChange(e){ 
    if(e.changedTouches[0].force > 0.5 ){ 
     e.preventDefault() 
    } 
} 

しかし、それは長いプレスイベントもブロックするようです。また、イベントがForce Touchに切り替わる際の特定の力レベルのようには見えません。

画像にCSSプロパティー-webkit-touch-callout: none;を追加すると、Force Touchイベントはブロックされますが、もう一度、長押しの吹き出しもブロックされます。

大変ありがとうございます！

Answer 1

（jQueryのを使用して、おそらくそれなしで行うことができる）

これはiPhone 7プラスのiOS 10.3.3でテストされ、私のために働いているようだ：

window.addEventListener('touchforcechange', function(event) { 
     var force = event.changedTouches[0].force; 
     var id = event.changedTouches[0].target.id; 

     if ($('#' + id).hasClass('class') && force > 0.1) { 
      event.preventDefault(); 
      console.log('prevented 3D touch on element with id = ' + id); 
     } 
    }); 

と 'クラス' を置き換えます3Dタッチが防止されるべき要素のクラス。あなたの場合はおそらくガレリアのすべての画像要素によって共有されるクラスです。

あなたの主な問題は、0.5がおそらくしきい値を超えていることです。