jQuery Mobile的滑動手勢與

Question

我使用jQuery Mobile的我有一個可拖動的元素類似這樣的各種HTML頁面的外部之間並在頁面上拖動切換姿態元素頁：

var moveMe = function(e) { 
    e.preventDefault(); 
    var orig = e.originalEvent; 
    var x = event.touches[0].pageX; 
    if(x>=275 && x<709){ 
     $(this).css({ 
      left: orig.changedTouches[0].pageX 
     }); 
    } 
}; 
$("#dragmetimer").bind("touchstart touchmove", moveMe); 

我切換頁面與jQuery Mobile的是這樣的：

$("#content1").live('swipeleft', function (event, ui) { 
    $.mobile.changePage("index2.html", "slide"); 
    event.stopImmediatePropagation(); 
}); 

$("#content2").live('swipeleft', function (event, ui) { 
    $.mobile.changePage("index3.html", "slide"); 
    event.stopImmediatePropagation(); 
}); 
$("#content2").live('swiperight', function (event, ui) { 
    $.mobile.changePage("index.html", { transition: "reverse slide"}); 
    event.stopImmediatePropagation(); 
}); 

的問題是，當我到達具有拖拽功能的頁面，當我拖動它，它使刷卡了。

有沒有什麼辦法來控制jQuery Mobile，並讓它不讀取滑動功能，而有一個拖動手勢？

Answer 1

我認爲你的問題與事件冒泡有關。 touchmove事件正在您的可拖動元素上正確觸發，但隨後會一直冒泡到DOM，導致它觸發頁面滑動事件。

嘗試增加給你的事件處理程序，它會冒泡停止事件：

e.stopPropagation(); 

所以，你的功能會是這樣的：

var moveMe = function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var orig = e.originalEvent; 
    var x = event.touches[0].pageX; 
    if(x>=275 && x<709){ 
     $(this).css({ 
      left: orig.changedTouches[0].pageX 
     }); 
    } 
};