Question

所以我希望能够弄清楚我的页面的哪个部分被点击了。无法保证元素全部出现在页面上，这意味着我需要使用像jquery delegate这样的东西。

执行此操作的一种方法是遍历DOM中的所有元素，然后将事件处理程序附加到每个元素 - 但这将是缓慢而复杂的 - 每次动态添加新的html时，我都必须要么重新附加所有处理程序，或找出添加的html子集。

另一种方法是使用事件冒泡 - 所以向文档或正文添加一个事件处理程序并依赖于冒泡的事件

类似这样的事情

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

        });

然而，在使用此代码后，当我点击页面上的按钮时，我得到了按钮周围的div，而不是实际的按钮。换句话说，上述内容太具体了。此外，我觉得原始选择器应该是文档，而不是body标签。

要清楚，我想知道在我的页面上点击任何元素的时间 - 我该怎么做？

由于

所以我用.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

试试这个：

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

您还可以使用e.stopPropagation()

终止点击事件中的冒泡

Answer 3

我认为没有必要在这样的事情上使用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>

为DOM中的所有元素附加click事件处理程序

3 个答案: