带有hammerjs滑动检测的输入类型范围在移动Safari上不可用答案

【问题标题】：input type range with hammerjs swipe detection not useable on mobile safari带有hammerjs滑动检测的输入类型范围在移动Safari上不可用
【发布时间】：2014-09-26 07:41:30
【问题描述】：

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

所以我包含了hammerjs，在文档正文中添加了一个滑动，在左侧滑动时滑动侧边菜单，然后在右侧滑动时返回。像魅力一样工作。

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

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

HTML

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

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，它显示了问题。

【问题讨论】：

尽量显示与您的代码有关的重要部分，即使您包含 JS 小提琴（这可以删除，我们将丢失对问题的引用）。
好的，谢谢指正

标签： javascript html hammer.js swipe-gesture

【解决方案1】：

有同样的问题，唯一帮助我的是防止触摸事件冒泡。

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

其实防止'touchmove'就足够了，但是为了可靠性我加了'start'和'end'。

【讨论】：