在DOM中的所有元素上附加單擊事件的事件處理程序

因此，我想要弄清楚我的頁面的哪個部分已被點擊。不能保證所有元素都在頁面上，這意味着我需要使用類似jquery delegate的東西。在DOM中的所有元素上附加單擊事件的事件處理程序

這樣做的一種方法是迭代DOM中的所有元素，然後爲每個元素附加一個事件處理程序 - 但這樣會很慢並且很複雜 - 每次新增html時都會動態添加，我必須重新 - 附加所有的處理程序，或找出已添加的html的子集。

另一種方法是使用事件冒泡 - 所以在事件添加事件處理程序的文檔，或身體並依靠冒泡

像這樣

 $('body').delegate('div', 'click', function(e){ 
      dummyId++; 
      console.log(e); 
      console.log(e.currentTarget); 
      console.log("====="); 

     });

然而，使用這種後代碼，當我點擊我的頁面上的按鈕時，我得到圍繞按鈕的div，而不是實際的按鈕。換句話說，上述過於具體。此外，我覺得原來的選擇器應該是文檔，而不是身體標籤。

要清楚，我想知道什麼時候在我的頁面上點擊了任何元素 - 我該怎麼做？

感謝

所以我想這個代碼。對

$(document).on('click', function(e){ 
    console.log("EVENT DUMMY ID"); 

    console.log(e.target); 
    console.log("====="); 

});

然而，當我在我的應用程序上的按鈕點擊，沒有被觸發 - 當我點擊其他元素，控制檯運行日誌。

我知道這可能很難回答，沒有更多的上下文 - 你還需要什麼？

來源

2014-03-27 praks5432

請勿使用基於選擇器的委派。只要將一個處理程序綁定到'document'，並檢查'e.target'。這將是最深入點擊的元素。 '$（document）.on（「click」，function（e）{console.log（e.target.nodeName）;}）' –

on can not work - I dynamic append html elements – praks5432

Before you say it can not work ，嘗試一下。沒有理由它不適用於動態創建的元素，假設我已經正確理解了您想要最深入點擊的元素。 –

currentTarget返回事件冒泡的節點（如果有的話）。相反，詢問target，所以：

香草：

document.addEventListener('click', function(evt) { 
    alert(evt.target.tagName); 
}, false);

的jQuery：

$(document).on('click', function(evt) { 
    alert(evt.target.tagName); 
});

http://jsfiddle.net/qsbdr/

來源

2014-03-27 22:38:32 Utkanos

這個小提琴顯示addEventListener處理動態添加的元素。 http://jsfiddle.net/qsbdr/2/ – jeffmayeur

-1

試試這個：

$(document).on('click', function(e) { 
    // now use e.target here 
});

您還可以通過使用e.stopPropagation()

來源

2014-03-27 22:42:01 dima

另外，你不需要'e.target？在jQuery中使用e.target：e.srcElement'。它爲你做到了。 '.live（）'已經從jQuery中移除。 –

如果他使用舊的jquery'live（）'是否存在...'on（）'自1.7版以來已被添加 – dima

是真的，但'.live（）'的工作方式，它依賴於傳遞選擇器。做'$（document）.live（'不會工作，因爲它沒有提供用於授權的選擇器。將.live（）'改爲'.bind（）'以適應老版本的jQuery， –

-1

殺上的click事件冒泡我看不出有任何需要使用jQuery這樣的事情，雖然我的建議並依靠MutationEvents，我的理解是要更換。

將任何新節點插入到DOM中後，您可以得到通知。在觸發的回調中，您可以簡單地將一個onclick處理程序附加到新節點。我只處理添加新節點的情況。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    window.addEventListener('DOMNodeInserted', onNodeInserted, false); 
    document.body.appendChild(newEl('div')); 
} 

function onNodeInserted(evt) 
{ 
    evt.srcElement.addEventListener('click', onNodeClicked, false); 
} 

function onNodeClicked() 
{ 
    document.body.appendChild(newEl('div')); 
} 
</script> 
<style> 
div 
{ 
    border: solid 1px red; 
    padding: 8px; 
    margin: 4px; 
    display: inline-block; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

來源

2014-03-27 22:59:11 enhzflep

瀏覽器支持怎麼樣？ –

IE9 ，Opera 12.15，Chrome 33.0.1750.154 m，Android 2.3默認瀏覽器，全部經過測試和功能齊全。 – enhzflep

在DOM中的所有元素上附加單擊事件的事件處理程序

回答

相關問題