JQuery Mobile Slider被视为滑动事件(JQuery Mobile Slider is being viewed as a Swipe Event)

 我正在使用滑块在JQuery Mobile中构建一个评估工具。 我将所有内容都放在一个文件中，每个页面都有多个div。 我有一个允许左右滑动的脚本。 由于脚本在用户滑动与使用滑块时无法区分，因此在调整滑块时会翻转到下一页。 
 
 我希望用户能够滑动到下一页，但不能在他们调整滑块时。 有什么建议么？？ 这是滑动事件： 
 
<script type="text/javascript">
        $('div.ui-page').live("swipeleft", function(){
            var nextpage = $(this).next('div[data-role="page"]');
            if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
            }
        });

        $('div.ui-page').live("swiperight", function(){
            var prevpage = $(this).prev('div[data-role="page"]');
            if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide",
            reverse: true}, true, true);
            }
        });
</script>
 
 这是滑块和页面： 
 
<div data-role="page">
        <h2>I can react quickly</h2>
        <input type="range" name="strength" id="strength" data-highlight="true" min="0" max="10" value="0">
</div>
 
 我真的很感激任何帮助或建议！ 

I'm building an assessment tool in JQuery Mobile that uses sliders. I have everything in one file with multiple div's to separate each page. I have a script that allows for swipe left and right. Because the script doesn't differentiate when the user is swiping versus using the slider, it flips to the next page as they adjust the slider.
 
I want the user to be able to swipe to the next page, but not when they're adjusting the slider. Any suggestions?? Here is the swipe event:
 
<script type="text/javascript">
        $('div.ui-page').live("swipeleft", function(){
            var nextpage = $(this).next('div[data-role="page"]');
            if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
            }
        });

        $('div.ui-page').live("swiperight", function(){
            var prevpage = $(this).prev('div[data-role="page"]');
            if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide",
            reverse: true}, true, true);
            }
        });
</script>
 
Here is the slider and page:
 
<div data-role="page">
        <h2>I can react quickly</h2>
        <input type="range" name="strength" id="strength" data-highlight="true" min="0" max="10" value="0">
</div>
 
I'd really appreciate any help or suggestions!!

原文：https://stackoverflow.com/questions/15578795