事件.on和.off

Question

我遇到一些問題，我正在做一些事件。

在我的document.ready我有

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是一個選項嗎？它只處理一次處理程序。