javascript - 带有 hammerjs 滑动检测的输入类型范围在移动 safari 上不可用

Question

我正在开发一个网络应用程序，右侧有一个小菜单，我想滑入和滑出。

所以我包含了 hammerjs，它向文档正文添加了滑动，并在左侧滑动时滑出侧边菜单，在右侧滑动时返回侧边菜单。就像一个魅力。

现在我的问题是，如果我添加 hammerjs 滑动检测，我在页面上也有 slider ()，我不能再移动 slider 了。在 Firefox 上， slider 有时会变慢并挂起。

当我删除 hammerjs 检测时， slider 会按预期工作。有谁知道我如何解决这个问题？

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);

实际上它足以阻止'touchmove'，但为了可靠性我添加了'start'和'end'。