如何点击元素（对于整个文档）？答案

【问题标题】：How to get the element clicked (for the whole document)?如何点击元素（对于整个文档）？
【发布时间】：2012-01-26 00:37:28
【问题描述】：

我想在我单击的 HTML 文档中获取当前元素（无论是什么元素）。我正在使用：

$(document).click(function () {
    alert($(this).text());
});

但很奇怪，我得到的是整个（！）文档的文本，而不是被点击的元素。

如何只获取我点击的元素？

示例

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

如果我点击“测试”文本，我希望能够在 jQuery 中读取带有$(this).attr("myclass") 的属性。

【问题讨论】：

处理函数在它被添加到的元素的范围内执行，这里是文档。您将需要获取事件对象的target 属性。

标签： javascript jquery html dom

【解决方案1】：

您需要使用event.target，这是最初触发事件的元素。示例代码中的this 指的是document。

在 jQuery 中，这是...

$(document).click(function(event) {
    var text = $(event.target).text();
});

没有 jQuery...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

另外，如果您需要支持attachEvent() 而不是addEventListener()。

【讨论】：

我发现返回的元素在某种程度上略有不同，所以我不能这样做if(event.target === myjQueryDivElement) 我必须这样做：if(event.target.hasClass('mydivclass')) 其中 mydivclass 是我的元素具有的类。
我在 Safari 中找了 3 天的工作，终于偶然发现了这篇文章。你们摇滚谢谢
@alex 嘿，应该是|| target.innerText？

【解决方案2】：

event.target 获取element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

从被点击的元素中获取文本

window.onclick = e => {
    console.log(e.target.innerText);
}

【讨论】：

我来这里是为了右键，所以我尝试了右键，但是没有用。
对于右键单击 - 而不是 onclick 添加 oncontextmenu
e.target 返回子点击元素。如果一个按钮有一个孩子，你不会得到按钮，而是点击的孩子。
如果没有，大多数情况下只会返回body标签

【解决方案3】：

在body标签内使用以下内容

<body onclick="theFunction(event)">

然后在javascript中使用下面的函数来获取ID

<script>
function theFunction(e)
{ alert(e.target.id);}

【讨论】：

【解决方案4】：

你可以在event.target中找到目标元素：

$(document).click(function(event) {
    console.log($(event.target).text());
});

参考资料：

http://api.jquery.com/event.target/

【讨论】：

【解决方案5】：

使用delegate 和event.target。 delegate 通过让一个元素侦听和处理子元素上的事件来利用事件冒泡。 target 是 event 对象的 jQ 规范化属性，表示事件源自的对象。

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

演示：http://jsfiddle.net/xXTbP/

【讨论】：

在这个时代应该提到on()应该被推荐而不是delegate()。此外，document 可能是唯一不使用 delegate()/on() 的例外，因为它们无论如何都会冒泡到处理的最高点。
好电话。在我的日常工作中，我们还没有升级到最新的 jQuery，所以 on 让我不以为然。
@alex，因为事件无论如何都在冒泡，并且由于处理程序必须无论如何都必须运行，所以这不是一个真正的例外是吗？只是没有什么不同而已。我猜delegate 确实需要考虑过滤开销，不过......

【解决方案6】：

我知道这篇文章真的很老了，但是，为了获取元素的内容并参考其 ID，我会这样做：

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}

【讨论】：

【解决方案7】：

$(document).click(function (e) {
    alert($(e.target).text());
});

【讨论】：

【解决方案8】：

这是在 javascript 中获取被点击元素的最简单方法。

window.addEventListener('click', (e) => console.log(e.target));

【讨论】：

【解决方案9】：

这是一个使用 jQuery 选择器的解决方案，因此您可以轻松定位任何类、ID、类型等的标签。

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});

【讨论】：