Question

我正在开发一个网页应用程序，右侧有一个小菜单，我想刷卡进出。

因此，我将hammerjs添加到文档正文中，然后在左侧滑动中向右滑动，然后向右滑动。像魅力一样。

现在我的问题我还有页面上的slider（）如果我添加hammerjs刷卡检测我不能再移动滑块了。在Firefox上，滑块变慢并且有时会挂起。

当我删除hammerjs检测时，滑块按预期工作。有没有人知道如何解决这个问题？

HTML

<div id="container">
    <input id="slide" type="range" min="0" max="100" value="100">
</div>
<div id="text">
</div>

JS

var mc = new Hammer.Manager(document.getElementById('container'));
mc.add(new Hammer.Swipe({
    direction: Hammer.DIRECTION_HORIZONTAL
}));

var textElement = document.getElementById('text');
textElement.innerHTML= 'noSwipe';
mc.on('swipe', function (e) {
    textElement.innerHTML = 'swipe'+e.direction;     
});

CSS

#container {
    width:100%;
    height:200px;
    border: 1px solid blue;
}

我已经a fiddle显示了问题。

Answer 1

有同样的问题，只有这有助于我防止触摸事件冒泡。

var stop = function(event) {
   event.stopPropagation();
};
$element.on('touchmove', stop);
$element.on('touchstart',stop);
$element.on('touchend', stop);

实际上它应该阻止“触摸”，但我添加了“开始”＃39;并且＆＃39;结束＆＃39;为了可靠性。

输入类型范围与hammerjs刷卡检测无法在移动野生动物园使用

1 个答案: