如何使用Javascript訪問iPhone中Safari的新3D touch？

Question

蘋果已經宣佈，其新的iPhone 6S和6S +，users can now use pressure to interact with their apps。是否有一個JavaScript API可供網頁開發人員在標準網站上利用這一新功能？如果是這樣，它如何實施？

Answer 1

是的，根據W3C，a new force property has been recently added to the spec of the Touch interface，範圍從0（最小力）到1（最大力）。這已經在iOS9上適用於Safari（不確定Chrome或其他瀏覽器是否已經實現了它）。

快速回答：

要訪問此屬性，簡單地調用

touchForce = evt.originalEvent.touches[0].force; 

一個touchstart或touchmove事件監聽器內。

沒有與此實施的幾個問題：

• 在touchstart，力將非常接近於0，因爲它只要檢測到的壓力的第一個跡象調用。
• 如果壓力升高或降低，touchstart事件將不會再次觸發。
• touchmove不可靠，因爲在讀取新的force之前，您必須等待位置更改，但情況並非總是如此。

解決方案：

爲了解決這個問題，你可以設置touchstart後評價這支部隊每隔幾毫秒爲單位，然後清除touchend超時。

var tO = 0; 
$("#div1").on("touchstart", startTouch); 
$("#div1").on("touchend", endTouch); 

function startTouch(evt){ 
    evt.preventDefault(); 
    touchForce = evt.originalEvent.touches[0].force; 
    tO = window.setTimeout(function(){startTouch(evt)}, 100); 
    // Do something with touchForce 
} 

function endTouch(){ 
    touchForce = 0; 
    window.clearTimeout(tO); 
    // Do something else 
} 

Try it out in this CodePen I created

這是一個有點哈克，但它的作品。也許在將來他們會創建一個新的forcechange事件，但這是我們現在所有的。

原諒JQuery，我用它來更快地說明這一點。

Answer 2

您可以使用JS庫Pressure.js。如果您擁有新的Force Touch觸控板的iPhone 6s或新Macbook，則可以輕鬆獲得iOS和OSX上的Force和3D Touch值。

的語法很簡單過，這裏有一個例子：

Pressure.set('#element', { 
    start: function(){ 
    // this is called on force start 
    }, 
    end: function(){ 
    // this is called on force end 
    }, 
    startDeepPress: function(){ 
    // this is called on "force click"/"deep press", aka once the force is greater than 0.5 
    }, 
    endDeepPress: function(){ 
    // this is called when the "force click"/"deep press" end 
    }, 
    change: function(force, event){ 
    // this is called every time there is a change in pressure 
    // here the 'force' variable passed in container the current pressure force 
    }, 
    unsupported: function(){ 
    // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch 
    } 
});