javascript - 如何使用Javascript在Safari中访问iPhone的新3D触摸？

Question

苹果已经宣布，其新款iPhone 6S和6S + users can now use pressure to interact with their apps。 Web开发人员是否有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

这有点hacky，但是可以用。也许将来他们会创建一个新的forcechange事件，但这是我们目前所拥有的。

对不起，我用JQuery更快地说明了这一点。