JQuery Mobile Slider被视为滑动事件

Question

我在使用滑块的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> 

我真的很感激任何帮助或建议！

Answer 1

您可以使用closest()检查，如果事件目标元素处理的滑动手势时，是不是一个滑块控件内：

$("div.ui-page").live("swipeleft", function(e) { 
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) { 
     var nextpage = $(this).next('div[data-role="page"]'); 
     if (nextpage.length > 0) { 
      $.mobile.changePage(nextpage, {transition: "slide"}, false, true); 
     } 
    } 
}); 

注意live()已赞成on()因为jQuery的1.7弃用，并于去除在jQuery 1.9中，所以它会更好写：

$(document).on("swipeleft", "div.ui-page", function(e) { 
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) { 
     // ... 
    } 
});