jquery移动滑动事件禁用输入范围

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery移动滑动事件禁用输入范围相关的知识,希望对你有一定的参考价值。

我正在使用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();
});

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

答案

这适用于jqm 1.4.5:

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

目前解决方法如下:

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

但是在从主体调用swipeleft事件后滑块停止。不要向左移动更多,所以我必须释放滑块并再次向左滑动,如果我需要直到滑动杆被调用等等。只是解决方法希望很快得到解决

以上是关于jquery移动滑动事件禁用输入范围的主要内容,如果未能解决你的问题,请参考以下文章

如果文本框处于焦点,则禁用 jQuery 事件

添加jquery移动滑动事件

jQuery -- touch事件之滑动判断(左右上下方向)

jquery mobile 滑动面板 - 在包含 iframe 的区域上滑动事件

移动端的一个js效果:手滑动向上向下滚动li标签

js判断移动端手势 上下左右滑动事件