JQuery - 刪除元素中的所有事件偵聽器

我正在實施滑動功能來更改網站中的頁面，以便與使用此處找到的插件（http://www.netcu.de/jquery-touchwipe-iphone-ipad-library）的移動設備一起使用。我還在這個問題的底部包含了插件代碼。JQuery - 刪除元素中的所有事件偵聽器

滑動功能本身很好，但由於我使用AJAX加載頁面，因此每次加載新頁面時都會添加新的事件處理程序，因此事件處理程序發生衝突。

我最初認爲這個問題是因爲我在android上測試，插件沒有完全測試，但是問題對於iOS設備也是如此。

我嘗試過使用stopImmediatePropagation（），但這意味着只使用第一個處理程序，而不是最後一個，這意味着同一個頁面反覆加載而不是下一個。我也嘗試過使用off（）和unbind（），但是這些不會刪除處理程序。

由於處理程序是使用插件中的addEventListener添加的，因此我認爲刪除它們的唯一方法是使用removeEventListener。但是，我在引用插件中創建的函數的名稱時遇到了問題。如果我可以引用函數名稱，那麼我認爲我可以刪除偵聽器，然後在加載頁面時添加新的偵聽器。如果因爲任何原因這是不可能的，有沒有辦法去除所有連接到除off（）或unbind（）以外的元素的監聽器？

非常感謝提前。 :)

代碼爲touchwipe插件：

/** 
* jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!) 
* Common usage: wipe images (left and right to show the previous or next image) 
* 
* @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de) 
* @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems) 
* @version 1.1 (1st September 2010) - support wipe up and wipe down 
* @version 1.0 (15th July 2010) 
*/ 
(function($) { 
    $.fn.touchwipe = function(settings) { 
    var config = { 
      min_move_x: 20, 
      min_move_y: 20, 
      wipeLeft: function() { }, 
      wipeRight: function() { }, 
      wipeUp: function() { }, 
      wipeDown: function() { }, 
      preventDefaultEvents: true 
    }; 

    if (settings) $.extend(config, settings); 

    this.each(function() { 
     var startX; 
     var startY; 
     var isMoving = false; 

     function cancelTouch() { 
      this.removeEventListener('touchmove', onTouchMove); 
      startX = null; 
      isMoving = false; 
     } 

     function onTouchMove(e) { 
      if(config.preventDefaultEvents) { 
       e.preventDefault(); 
      } 
      if(isMoving) { 
       var x = e.touches[0].pageX; 
       var y = e.touches[0].pageY; 
       var dx = startX - x; 
       var dy = startY - y; 
       if(Math.abs(dx) >= config.min_move_x) { 
        cancelTouch(); 
        if(dx > 0) { 
         config.wipeLeft(); 
        } 
        else { 
         config.wipeRight(); 
        } 
       } 
       else if(Math.abs(dy) >= config.min_move_y) { 
         cancelTouch(); 
         if(dy > 0) { 
          config.wipeDown(); 
         } 
         else { 
          config.wipeUp(); 
         } 
        } 
      } 
     } 

     function onTouchStart(e) 
     { 
      if (e.touches.length == 1) { 
       startX = e.touches[0].pageX; 
       startY = e.touches[0].pageY; 
       isMoving = true; 
       this.addEventListener('touchmove', onTouchMove, false); 
      } 
     }  
     if ('ontouchstart' in document.documentElement) { 
      this.addEventListener('touchstart', onTouchStart, false); 
     } 
    }); 

    return this; 
    }; 

})(jQuery);

來源

2014-06-30 helencrump

您試圖刪除哪些事件監聽器？它是通過插件連接的onTouchMove，onTouchStart還是所有事件監聽器？如果是這種情況，您可能需要在對象中添加一個布爾變量，指示** if（hasAlreadyAttached）**不再附加偵聽器，但這會改變插件代碼。 – CodeCowboyOrg

我實際上已經解決了這個問題，將調用移動到另一個位置，以便它只被調用一次。感謝您的所有幫助。 :) – helencrump

檢查這個代碼：

var test = $("<div></div>"); // example element 
test . click (function() {}); 
test . mouseover (function() {}); 
$.each ($._data (test [ 0 ], "events"), function (name) // first argument of function: "$._data()" is: "Element" - not jQuery object 
{ 
    //console . log (name); // output: "click" and "mouseover 
    test . off (name); // function off() removes an event handler 
}); 
// alert (typeof $._data (test [ 0 ], "events")); // return "undefined" - no events

更多：jQuery function off。
工作小提琴：JSFiddle。

來源

2014-06-30 16:04:00 s77s

JQuery - 刪除元素中的所有事件偵聽器

回答

相關問題