為 DOM 中的所有元素上的 click 事件附加事件處理程序

Question

我希望能夠弄清楚我的頁面的哪一部分被點擊了。 不能保證元素從一開始就都在頁面上，這意味着我需要使用 jQuery 委托之類的東西。

一種方法是遍歷 DOM 中的所有元素，然后將事件處理程序附加到每個元素 - 但這會很慢而且很復雜 - 每次動態添加新的 html 時，我都必須重新附加所有處理程序，或找出添加的 html 子集。

另一種方法是使用事件冒泡 - 所以向文檔或正文添加一個事件處理程序，並依賴於冒泡的事件。

像這樣的東西：

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

});

但是，在使用此代碼后，當我單擊頁面上的按鈕時，我會看到按鈕周圍的 div，而不是實際按鈕。 換句話說，上面的內容太具體了。 此外，我覺得原始選擇器應該是文檔，而不是正文標簽。

明確地說，我想知道何時點擊了我頁面上的任何元素 - 我該怎么做？

所以我用.on嘗試了這個代碼：

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

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

});

但是，當我單擊應用程序中的按鈕時，不會觸發任何內容 - 當我單擊其他元素時，控制台日志會運行。

我知道如果沒有更多背景，這可能很難回答 - 您還需要什么？

Answer 1

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/

Answer 2

只需這樣做：

var listener = function handleClick(event){
    element = event.target
    console.log(element) 
    }

var body = document.body
body.addEventListener('click', listener, true);

這將打印在 DOM 上單擊的元素。

Answer 3

我遇到了同樣類型的問題，以找出在導航欄上單擊了哪個元素。 我在動畫幻燈片工作。 所以，為了解決它，我嘗試處理<ul>所有事件

需要注意的是：這只是一塊塊。 不是整個網頁。

這是我的 reactjs 代碼。 概念是一樣的。

jsx

        <ul className="right" onClick={setRainbow}>
            <li><Link to="/">Home</Link></li>
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
        </ul>

功能

    const setRainbow = (e) => {
            console.log(e.target)
            console.log(e.target.href)
            console.log(e.target.text)
        if (e.target.text === 'About') {
            // to do
        } else {
            // to do
        }
    }

Answer 4

嘗試這個：

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

您還可以使用e.stopPropagation() click事件的冒泡

Answer 5

盡管我的建議確實依賴MutationEvents，但我認為無需替換，但我認為不需要使用jQuery這樣的東西。

您可以在將任何新節點插入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>

為 DOM 中的所有元素上的 click 事件附加事件處理程序

問題描述

5 個解決方案

解決方案1
7 2014-03-27 22:38:32

解決方案2
0 2021-08-22 13:12:37

解決方案3
0 2021-12-07 18:48:18

解決方案4
-1 2014-03-27 22:42:01

解決方案5
-1 2014-03-27 22:59:11

為 DOM 中的所有元素上的 click 事件附加事件處理程序

問題描述

5 個解決方案

解決方案1 7 2014-03-27 22:38:32

解決方案2 0 2021-08-22 13:12:37

解決方案3 0 2021-12-07 18:48:18

解決方案4 -1 2014-03-27 22:42:01

解決方案5 -1 2014-03-27 22:59:11

解決方案1
7 2014-03-27 22:38:32

解決方案2
0 2021-08-22 13:12:37

解決方案3
0 2021-12-07 18:48:18

解決方案4
-1 2014-03-27 22:42:01

解決方案5
-1 2014-03-27 22:59:11