0

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

4

1 回答 1

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
        });
    }
};
于 2012-07-31T14:17:15.890 回答