スワイプして削除できるように、このプラグインを自分のサイトに統合しようとしています。ただし、問題は、このプラグインが「スワイプ」でトリガーされ、同じスワイプ イベントを使用してパネルが表示されることです。を使用してイベントを分離することができましたevent.target.tagName
。(リンク)の場合A
、スワイプして削除ボタンをアクティブにしたい、そうでない場合はパネルをスライドさせたい.
つまり、pageinit イベントが 2 回トリガーされるため、スワイプして削除ボタンが表示され始め、同じイベントが再度トリガーされます。どうにかして1つのアクションをキャンセルしたいのですが、うまくいきません。私はすでに試しました:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
また、ここに示されているいくつかのソリューションを使用しようとしましたが、うまくいきませんでした: jQuery Mobile: document ready vs page events
私の問題のデモはスニップで見つけることができ、現在の pageinit 関数は次のとおりです。
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});