JavaScript 力或半径的触摸事件更新
JavaScript touch event updates for force or radius
JavaScript 触摸事件包含半径和力的属性。不幸的是,当 属性 发生变化时似乎不会生成事件。只有触摸开始、移动或结束等事件才会触发事件。谁能想出一种方法来获取有关触摸大小更改的更多更新?
目前要获取半径更新,我必须摆动手指才能触发触摸移动事件,但我更喜欢软件解决方案。
我遇到了同样的问题,然后发现了这个博客 post: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();
JavaScript 触摸事件包含半径和力的属性。不幸的是,当 属性 发生变化时似乎不会生成事件。只有触摸开始、移动或结束等事件才会触发事件。谁能想出一种方法来获取有关触摸大小更改的更多更新?
目前要获取半径更新,我必须摆动手指才能触发触摸移动事件,但我更喜欢软件解决方案。
我遇到了同样的问题,然后发现了这个博客 post: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();