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 に答える