输入范围的jQuery移动滑动事件禁用

Question

我正在使用 jquery mobile 在这样的应用程序中关闭和打开菜单：

$('body').on('swipeleft', function(event){
    if(menuOpen == true){
        home.showMenu();
    }
});

$('body').on('swiperight', function(event){
    if(menuOpen == false){
        home.showMenu();
    }
});

我的菜单中有一个输入范围（滑块），如下所示：

<input id="changeRadiusRange" type="range" min="5" max="100" step="5" oninput="handleInputVal(value)" onchange="handleChangeVal(this.value)">

现在，如果我使用我的滑块，它会在一段时间后停止（我认为左/右滑动的 30 像素会被触发，如果它是左滑动，菜单正在关闭）

我已经尝试了一些关于 this 问题的事情，结果是这样，但没有改变行为：

$('#changeRadiusRange').on('swipeleft swiperight', function(e){
    e.stopPropagation();
    e.preventDefault();
});

如何强制输入行为正常不受滑动事件的影响？

Answer 1

我今天遇到了同样的问题，并找到了一个不那么老套的解决方案。

var handleSwipe = function (event) {
    // my swipe stuff
}

// regular event listening
$(document).on("swipeleft swiperight", handleSwipe);

// additional workaround
$(".slider").on("mousedown touchstart", function (event) {
    // when starting to interact with a .slider, stop listening the event
    $(document).off("swipeleft swiperight");
}).on("mouseup touchend", function (event) {
    // when interaction stops, re-listen to swipe events
    $(document).on("swipeleft swiperight", handleSwipe);
});

似乎滑块永远不会正常工作，只要在文档中的任何位置使用滑动事件。当事件处理程序中没有任何操作时，情况也是如此。 preventDefault() 和/或 stopPropagation() 也不会改变任何东西。

使用此解决方案，我会在用户与滑块交互时终止之前启用的滑动事件。交互完成后，我重新启用滑动事件。非常适合我。

Answer 2

这对我来说适用于 jqm 1.4.5：

$(document).on('mousedown touchstart', 'input[type=range]',
function(e){
e.stopPropagation();
});

Answer 3

目前是这样解决的：

$('body').on('swipeleft', function(event){
    if(event.target.id != "changeRadiusRange"){
        if(menuOpen == true){
            home.showMenu();
        }
    }
});

但是在从 body 调用 swipeleft 事件后，滑块停止了。不会向左移动更多，因此如果需要，我必须释放滑块并再次向左滑动，直到调用 swipeleft 等。只是解决方法希望尽快修复它