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) { 
     // ... 
    } 
});