Question

我遇到了阻止双重事件的问题

所以首先我有一段触发

的代码

jQuery(window).trigger('swipeForward');

所以这会侦听此触发器

jQuery(window).on('swipeForward', swipeHandlerNext );

滑动处理程序的想法是，用户无法刷两次并创建双重事件

然后执行swipeHandlerNext函数

function swipeHandlerNext(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(".pageSize").off("swipeForward");

        // Do your stuff here
        pageSize = jQuery(".mainHeader").width();
        slide("forward", pageSize);

        console.log(" swipe complete page forward via swipe");

        // Mark event as handled
        event.handled = true;
    } 

    return false;
}

这显然会执行滑动功能。这是具有.animate命令的那个

function slide(data, pageSize) {


    if (!pageSize) {
    pageSize = jQuery(".mainHeader").width();
    }

    var promise  = calcLeft(data, pageSize);


    jQuery.when(promise).then(function(result) {

        console.log(result);

        jQuery('#pageHolder').delay(500).animate({
            left: result

          }, 400, function() {
            console.log("animation started");
            calcNav(pageSize);
            calcPage(pageSize);
            jQuery(".pageSize").on("swipeForward", swipeHandlerNext);
            console.log("animation complete");

        });


    });

}

然而，它并没有阻止双重滑动。

感谢您的帮助

Answer 1

为什么Off()在您的示例中不起作用

jQuery的off()方法期望选择器为match the one originally passed to .on() when attaching event handlers。

在您的初始事件绑定中，您将事件附加到window元素jQuery(window).on(...)。但是在处理程序函数中，您将删除然后使用.pageSize和jQuery('.pageSize').off(...)将事件重新附加到jQuery('.pageSize').on(...)元素。

换句话说，实际上你没有删除绑定到window元素的事件处理程序，因此用户可以继续刷卡。

为什么event.handled在您的示例中不起作用

每次滑动事件发生时，都会创建一个单独的 event对象并将其传递给处理程序。因此event对象不是一个全局变量，您可以在后续滑动中修改并检查其状态。

关注您示例的可能解决方案

匹配传递给on()和off()方法的选择器。
设置和取消设置全局变量，作为正在进行滑动的指示。

jquery停止双重事件

1 个答案: