Question

我正在处理一些与我正在制作的事件有关的问题。

在我的文件上。我已经

了

jQuery(document).ready(function () {


//deal with clicks

jQuery(".touchslider-prev").click( function() { 

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

jQuery(".touchslider-next").click( function() { 

    jQuery(window).trigger('swipeBackward');
});

//deal with swipe 

var maxTime = 1000,
    // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,
    // swipe movement of 50 pixels triggers the swipe
    target = jQuery('.pageSize'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

target.bind(startEvent, function(e) {
    // prevent image drag (Firefox)
    // e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).bind(moveEvent, function(e) {
    // e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
        if (currentX < startX) {
            // swipe left code here

           console.log("page forward trigger");
           jQuery(window).trigger('swipeForward');

        }
        if (currentX > startX) {
            // swipe right code here
             console.log("page back trigger");
           //slide("back", pageSize);
            jQuery(window).trigger('swipeBackward');
        }
        startTime = 0;
        startX = 0;
    }
});


//handle triggers from click and slide

jQuery(window).on('swipeForward', clickHandlerNext );
jQuery(window).on('swipeBackward', clickHandlerPrev );

});

如果我然后点击向前或向前滑动，则应触发swipeForward，这会使这段代码发挥作用jQuery(window).on('swipeForward', clickHandlerNext );

所以应该运行clickHandlerNext函数

function clickHandlerPrev(event) {

if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("click", clickHandlerPrev);
        jQuery(window).off("click", clickHandlerNext);
        console.log("switch off handlers");

        // Do your stuff here
        slide("back");

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

    return false;
}

function clickHandlerNext(event) {

    // If event isn't already marked as handled, handle it

    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        jQuery(window).off("click", clickHandlerPrev);
        jQuery(window).off("click", clickHandlerNext);
        console.log("switch off handlers");

        // Do your stuff here
        slide("forward");

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

这应该关闭处理程序，然后运行幻灯片功能。

function slide(data) {


        jQuery('#pageHolder').animate({
            left: 950

          }, 400, function() {
            console.log("animation started");
            console.log("switch on handles");
jQuery(window).on("click", clickHandlerPrev);
            jQuery(window).on("click", clickHandlerNext);

            console.log("animation complete");

        });


}

然后返回处理程序。但是，如果我在下次按下按钮时删除了行jQuery(window).on("click", clickHandlerPrev);，它仍会运行处理程序 - 但它不应该设置为.off

任何人都可以帮忙吗？

感谢

Answer 1

jQuery.one可以选择吗？它仅应用处理程序一次。

事件.on和.off

1 个答案: