在 DOM 中的所有元素上附加 click 事件的事件处理程序答案

【问题标题】：Attach event handlers for click event on all elements in the DOM在 DOM 中的所有元素上附加 click 事件的事件处理程序
【发布时间】：2023-03-28 18:49:01
【问题描述】：

我希望能够确定我的页面的哪一部分被点击了。不能保证元素从一开始就在页面上，这意味着我需要使用 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("=====");

});

但是，当我单击应用程序中的按钮时，什么都不会触发 - 当我单击其他元素时，控制台日志会运行。

我知道如果没有更多上下文，这可能很难回答 - 你还需要什么？

【问题讨论】：

不要使用基于选择器的委托。只需将处理程序绑定到document，然后检查e.target。这将是点击次数最多的元素。 $(document).on("click", function(e) { console.log(e.target.nodeName); })
on 无法工作 - 我动态附加 html 元素
在你说它不能工作之前，先试试吧。没有理由它不适用于动态创建的元素，假设我已经正确理解您想要最深点击的元素。
我已经尝试过了 - api.jquery.com/on - 也支持我 - “事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用时存在于页面上。上（）。”
cookie monster 的代码将起作用，正是因为他绑定到文档 - 从一开始就存在的元素 - 并且只有在回调中询问调用事件的实际元素时，无论是从一开始就在那里或后来添加。

标签： javascript jquery dom events jquery-events

【解决方案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/

【讨论】：

这个小提琴显示 addEventListener 处理动态添加的元素。 jsfiddle.net/qsbdr/2

【解决方案2】：

只需这样做：

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

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

这将打印在 DOM 上单击的元素。

【讨论】：

【解决方案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
        }
    }

【讨论】：

【解决方案4】：

试试这个：

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

你也可以使用e.stopPropagation()杀死点击事件的冒泡

【讨论】：

另外，在 jQuery 中你不需要 e.target ? e.target : e.srcElement。它为你做到了。并且 .live() 已从 jQuery 中删除。
如果他使用旧的 jquery live() 有没有... on() 从 1.7 版开始添加
没错，但.live() 的工作方式，它依赖于传递的选择器。执行$(document).live( 将不起作用，因为它没有提供用于委托的选择器。将.live() 更改为.bind() 以适应旧版本的jQuery，它会工作。
是的，没关系.. 看起来他正在使用更新版本的 jQuery
请注意，对于页面上其他按钮的点击事件，这些按钮的点击功能中不应包含e.stopPropagation();...否则不会触发文档上的此点击事件您单击页面上的此类按钮...如果有人遇到此类问题，我只是想提一下...

【解决方案5】：

我认为没有必要使用 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>

【讨论】：

浏览器支持怎么样？
IE9，Opera 12.15，Chrome 33.0.1750.154 m，Android 2.3 上的默认浏览器。所有测试和功能。