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
        });
    }
};

jQuery Mobile在页面中使用可拖动的手势元素轻扫手势

1 个答案: