力或半径的 JavaScript 触摸事件更新

Question

JavaScript 触摸事件包含半径和力的属性。不幸的是，当任何一个属性发生变化时，似乎都不会生成事件。只有触摸开始、移动或结束等事件才会触发事件。谁能想出一种方法来获得有关触摸大小更改的更多更新？

目前要获取半径更新，我必须摆动手指才能触发触摸移动事件，但我更喜欢软件解决方案。

Answer 1

我遇到了同样的问题，然后发现了这篇博文：http://blog.framerjs.com/posts/prototyping-3D-touch-interactions.html

简而言之，我们需要使用

touchstart

事件捕获触摸事件，将事件赋值给一个变量然后使用

setInterval

获取

force

值：

var el = document.getElementById('myElement');
var currTouch = null;
var currTouchInterval = null;

attachListeners = function () {
    el.addEventListener('touchstart', enterForceTouch, false);
    el.addEventListener('touchend', exitForceTouch, false);
}

enterForceTouch = function (evt) {
    evt.preventDefault();
    currTouch = evt;
    currTouchInterval = setInterval(updateForceTouch, 10); // 100 times per second.
}

updateForceTouch = function() {
    if (currTouch) {
        console.log(currTouch.touches[0].force); // Log our current force value.
    }
}

exitForceTouch = function (evt) {
    evt.preventDefault();
    currTouch = null;
    clearInterval(currTouchInterval);
}

attachListeners(); 

Answer 2

相关讨论： 如何让touchstart不断更新touch.radiusX？ ES6

幸运的是，新的

pointerrawupdate

事件有更好的方法，您可以使用

event.width

而不是

radiusX

来检测用户手指的粗度。刚刚在 Android/Chrome 上测试，与

touchmove

相比，它的触发频率高出约 50%。在某些应用中，结果可能足够好。

https://caniuse.com/mdn-api_element_pointerrawupdate_event