防止圖像上的強制觸摸事件，但仍允許iOS中的長按事件Safari

我們需要在圖像庫中阻止Apple對圖像的Force觸摸事件，但仍允許長按觸發「保存圖像」標註。我們爲我們的iOS用戶提供說明，以長按圖像，然後選擇「保存圖像」，但如果用戶不小心按壓太緊並觸發Force Touch事件，用戶會感到非常困惑 - 特別是在「彈出」並加載圖像時在一個新的頁面。防止圖像上的強制觸摸事件，但仍允許iOS中的長按事件Safari

最初我想過聽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事件，但它同樣會在長按時阻止標註。

任何想法非常感謝！

來源

2017-02-10 Henry Dawson

看起來好像WebKit團隊正在研究處理Force Click的事件，這可能會提供足夠的控制權來執行此操作。 https://webkit.org/status/#feature-force-click-events –

（使用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可能太高的閾值。

來源

2017-08-09 17:08:41 banana1

防止圖像上的強制觸摸事件，但仍允許iOS中的長按事件Safari

回答

相關問題