带有可拖动手势元素的页面中的 jQuery Mobile 滑动手势答案

【问题标题】：jQuery Mobile swipe gesture in page with draggable gesture element带有可拖动手势元素的页面中的 jQuery Mobile 滑动手势
【发布时间】：2012-07-31 14:00:29
【问题描述】：

我正在使用 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 并使其在拖动手势时不读取滑动功能？

【问题讨论】：

标签： jquery mobile drag gesture swipe

【解决方案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
        });
    }
};

【讨论】：