在jQuery Mobile中右滑触发两次



我正试图将此插件集成到我的网站中,以便我可以滑动删除。然而问题是,这个插件是触发一个'swiperight',相同的滑动事件是用来显示我的面板。我设法用event.target.tagName分离事件。当它是一个A(链接),我想激活滑动删除按钮,否则我想我的面板滑动。

换句话说,pageinit事件被触发两次,因此滑动删除按钮开始出现,然后再次触发相同的事件。我想以某种方式取消一个动作,但我不能使它工作。我已经试过了:

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

修复了使用以下插件的问题:TouchSwipe可以简单地从事件中排除元素。

最新更新