Javascript 如何点击元素（对于整个文档）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9012537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the element clicked (for the whole document)?
提问by user1145216
I would like to get the current element (whatever element that is) in an HTML document that I clicked. I am using:
我想在我单击的 HTML 文档中获取当前元素（无论是什么元素）。我在用：
$(document).click(function () {
alert($(this).text());
});
But very strangely, I get the text of the whole(!) document, not the clicked element.
但很奇怪的是，我得到了整个（！）文档的文本，而不是被点击的元素。
How to get only the element I clicked on?
如何只获取我点击的元素？
Example
例子
<body>
<div class="myclass">test</div>
<p>asdfasfasf</p>
</body>
If I click on the "test" text, I would like to be able to read the attribute with $(this).attr("myclass") in jQuery.
如果我单击“测试”文本，我希望能够$(this).attr("myclass"在 jQuery 中使用)读取属性。
回答by alex
You need to use the event.targetwhich is the element which originally triggered the event. The thisin your example code refers to document.
您需要使用event.targetwhich 是最初触发事件的元素。在this您的示例代码指document。
In jQuery, that's...
在 jQuery 中，这是...
$(document).click(function(event) {
var text = $(event.target).text();
});
Without jQuery...
没有jQuery...
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement,
text = target.textContent || target.innerText;
}, false);
Also, ensure if you need to support < IE9 that you use attachEvent()instead of addEventListener().
另外，请确保您是否需要支持 < IE9attachEvent()而不是addEventListener().
回答by bhv
window.onclick = e => {
console.log(e.target);
console.log(e.target.tagName);
}
to get the text from clicked element
从被点击的元素中获取文本
window.onclick = e => {
console.log(e.target.innerText);
}
回答by Malek Tubaisaht
use the following inside the body tag
在 body 标签中使用以下内容
<body onclick="theFunction(event)">
then use in javascript the following function to get the ID
然后在javascript中使用以下函数来获取ID
<script>
function theFunction(e)
{ alert(e.target.id);}
回答by Peter-Paul van Gemerden
You can find the target element in event.target:
您可以在event.target以下位置找到目标元素：
$(document).click(function(event) {
console.log($(event.target).text());
});
References:
参考：
回答by JAAulde
Use delegateand event.target. delegatetakes advantage of the event bubbling by letting one element listen for, and handle, events on child elements. targetis the jQ-normalized property of the eventobject representing the object from which the event originated.
使用delegate和event.target。delegate通过让一个元素侦听和处理子元素上的事件来利用事件冒泡。target是event表示事件源自的对象的对象的 jQ 规范化属性。
$(document).delegate('*', 'click', function (event) {
// event.target is the element
// $(event.target).text() gets its text
});
回答by Aft3rL1f3
I know this post is really old but, to get the contents of an element in reference to its ID, this is what I would do:
我知道这篇文章真的很旧，但是，要根据元素的 ID 获取元素的内容，我会这样做：
window.onclick = e => {
console.log(e.target);
console.log(e.target.id, ' -->', e.target.innerHTML);
}
回答by Aft3rL1f3
$(document).click(function (e) {
alert($(e.target).text());
});
回答by Henry Lockett
Here's a solution that uses a jQuery selector so you can easily target tags of any class, ID, type etc.
这是一个使用 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 );
});
