如何使用 Javascript 在 Safari 中访问 iPhone 的新 3D touch？

Question

Apple 宣布其新 iPhone 6S 和 6S+ users can now use pressure to interact with their apps。是否有 JavaScript API 供 Web 开发人员在标准网站上也利用此新功能？如果可以，如何实现？

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。如果您有 iPhone 6s 或带有新 Force Touch 触控板的新 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
  }
});

如何使用 Javascript 在 Safari 中访问 iPhone 的新 3D touch？

How can I access iPhone's new 3D touch in Safari with Javascript?

javascript

iphone

safari

ios

3dtouch