如何從addEventListener中刪除dupliacte

如何從addEventListener中刪除重複項。如何從addEventListener中刪除dupliacte

我有網站，當用戶打某些電話時，使用ajax填充不同的div。我也有一個JavaScript函數抓取所有的鏈接，並使addEventListener，以便我可以過濾的網址，如果用戶點擊某些鏈接提供警報。下面是創建addEventListener

function supportFunction() { 
    var myFunction = function(e) { 
    var regExp = new RegExp('//'+location.hostname+'($|/)'); 
    var href = this.href; 

    if (regExp.test(href)) { 
     e.preventDefault(); 
     alert('same domain link'); 
    } 
    } 
    var links = document.querySelectorAll('a'); 

    for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener('click', myFunction); 
    } 
}

我現在面臨的問題是，一些內容被使用supportfunction後阿賈克斯（）被調用填充，如果任何環節都出現在新填充我的Java腳本函數內容它不會被添加到addEventListener。每當進行ajax調用時，我都會嘗試調用supportfunction，但是在這種情況下，會將重複項添加到eventlistener中。也就是說，如果有人點擊相同的域名鏈接，他們將得到2個警報，並且一些情況下會發生3-4次警報，具體取決於調用supportfunction（）的時間。

我想我解釋過，我的問題是什麼。讓我知道你們是否想要更多關於這個問題的解釋。

我試着googleing一個答案，發現這個鏈接 http://dean.edwards.name/weblog/2005/10/add-event/但不能弄清楚如何在我的情況下使用它。

注：我正在尋找一個純java腳本解決方案而不是jQuery解決方案。（我希望我在這裏不要求:)）

來源

2014-02-13 user1846348

尋找「事件代表團」。不要在鏈接上添加事件，而是在靜態父容器上添加事件，然後使用事件目標元素來確定它是否是鏈接。 – elclanrs

我會將*一個*'click'事件附加到body，然後檢查'event.target'或'event.srcElement'。如果元素是鏈接（'a'），則執行函數。 – JCOC611

[動態創建的元素上的事件綁定？]的可能重複？（http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） – Bergi

您希望每條鏈接都只能事件綁定一次。您可以製作一個標記來標記它是否是事件綁定的。所以代碼如下。

function supportFunction() { 
    var myFunction = function(e) { 
     var regExp = new RegExp('//'+location.hostname+'($|/)'); 
     var href = this.href; 
     if (regExp.test(href)) { 
      e.preventDefault(); 
      alert('same domain link'); } 
    } 
    var links = document.querySelectorAll('a'); 
    for (var i = 0, len = links.length; i < len; i++) { 
     var link = links[i]; 
     // make sure add-event only once 
     if(!link.getAttribute('data-added')) { 
      link.setAttribute('data-added', 1); 
      link.addEventListener('click', myFunction); 
     } 
    } 
}

來源

2014-02-13 01:39:15 jansesun

有一個[* document.links *]（http://www.w3.org/html/wg/drafts/html/CR/dom.html#dom-document-links）集合應該更快，更方便比* querySelectorAll *。 – RobG

如果你只是增加一個監聽者而沒有其他人，你可以這樣做：

links[i].onclick = myFunction;

並在每次添加元素時運行該函數。這樣，如果鏈接上已有聽衆，它將被替換爲myFunction。或者你可以這樣做：

if (!links[i].onclick) { 
    links[i].onclick = myFunction; 
}

但代表團很可能是最好的解決辦法：把一個點擊監聽器上的所有對象的鏈接（也許一個div）父母和測試event target（W3C DOM模型）或srcElement（IE模型）來查看它是否來自您關心的鏈接。

相關MDN文章：event.target。

來源

2014-02-13 01:33:10 RobG

如何從addEventListener中刪除dupliacte

回答

相關問題