可靠地使用hammer.js来获取平移事件,同时仍然在iOS中自然滚动...?

时间:2015-08-03 05:13:24

标签: html ios safari touch hammer.js

基本上,我希望能够使用hammer.js来检测任何pan事件的开始和结束(或者至少是所有pan-x事件),同时仍然允许在x轴上自然溢出滚动。平移识别器上的touchAction声明允许它与Android上的自然溢出滚动一起使用> Chrome,但不适用于iOS> Safari(任何Safari构建目前都不支持触摸操作声明)。

Codepen(debug-mode)  要么 Codepen(normal-mode)

EG。

var hit = document.getElementById('hit');
var text = document.getElementById('text');

var hammer = new Hammer.Manager(hit);
hammer.add(new Hammer.Pan({
  direction: Hammer.DIRECTION_ALL,
  touchAction: 'pan-x'
}));

hammer.on("panstart", function(ev){
  console.log('panstart');
  text.textContent = ev.type +" detected.";
});
hammer.on("panend pancancel", function(ev){
  console.log('panend');
  text.textContent = ev.type +" detected.";
});

是否有可靠的方法来检测平移运动的所有方向(或仅x),还允许正常的溢出scroll-x行为(在iOS中)?我尝试将平底锅识别器切换到垂直位置,但发现平底锅不会立即/可靠地立即被检测到。

1 个答案:

答案 0 :(得分:1)

第二个想法,也许Hammer.js对于这个特殊的用例来说太过分了。

我已经设法通过剥离Hammer,并简单地使用原生的ontouchstart和ontouchend事件来获得理想的结果。例如:

aDomObject.addEventListener('touchstart', handlePanStart, false);
aDomObject.addEventListener('touchend', handlePanEnd, false);
aDomObject.addEventListener('touchcancel', handlePanEnd, false);

这样,任何触摸事件的默认操作都会落到默认的浏览器行为(在我的情况下 - 溢出!)。