冒泡處理許多元素的點擊事件

我有一個名爲overlay-controls的父級div中包含的控件列表。冒泡處理許多元素的點擊事件

有許多列表控件，每個都有自己的overlay-controls。

我正在使用for循環將事件偵聽器添加到每個包含類delete的按鈕。

在用戶可以刪除該項目之前，他們必須確認。我正試圖將這個附加到覆蓋控件中的每個刪除按鈕上。

我得到它使用for循環工作，但我知道有一個更好的方法使用冒泡和捕獲。通過冒泡到父div，我無法只針對疊加控件中的刪除類。

這裏查看現場演示通過點擊每個刪除按鈕：http://jsfiddle.net/8qqfeoa2/1/

下面是使用我的代碼for循環：

(function() { 
     function getConfirmation(e){ 
      var retVal = confirm("Are you sure you want to delete this request?"); 
      if(retVal == true){ 
       return true; 
      }else{ 
       e.preventDefault(); 
       return false; 
      } 
     } 

     var del = document.querySelectorAll('.delete'); 

     for(var i = 0, len = del.length; i < len; i++){ 
     del[i].addEventListener('click', function(e) { 
      getConfirmation(e); 
     }, false); 
     } 

    }());

來源

2014-11-21 AntonB

您標記了一個問題，jQuery的，但似乎完全避免使用它。這是有原因的嗎？ – dehrg 2014-11-21 17:21:31

想避免jQuery（用於學習目的），但會考慮jQuery解決方案。 – AntonB 2014-11-21 17:22:46

你不事件需要爲/。每個循環

Jquery負責內部處理

$('.delete').on('click', function(e){ getConfirmation(e); });

假設您使用jQuery並在getConfirmation方法中，您還可以使用e.target來獲取特定（單擊）元素，該元素返回發生點擊的目標。

來源

2014-11-21 17:26:00

這個作品很喜歡看到一個javascript唯一的解決方案，不需要改變我的方法getConfirmation（e），因爲我們已經瞄準了刪除按鈕。 – AntonB 2014-11-21 17:31:03

所以你在這裏 'var deletebuttons = document.getElementsByClassName（'delete'）; （var button in deletebuttons）{ button.onclick = getConfirmation; }' – 2014-11-21 17:32:59

只有JavaScript的解決方案

當你要求一個

var deletebuttons = document.getElementsByClassName('delete'); for(var button in deletebuttons) { button.onclick = getConfirmation; }

來源

2014-11-21 17:34:11

冒泡處理許多元素的點擊事件

回答

相關問題