Question

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

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

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

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

实施例

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

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

Answer 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);

另外，确保您是否需要支持＆lt;您使用attachEvent()而不是addEventListener()的IE9。

Answer 2

在body标签内使用以下内容

<body onclick="theFunction(event)">

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

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

Answer 3

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

从点击的元素中获取文本

(input type=radio)

Answer 4

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

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

参考文献：

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

Answer 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/

Answer 6

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

Answer 7

我知道这篇文章确实很老，但是，为了获取元素的内容以引用其ID，这就是我要做的事情：

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

Answer 8

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

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

Answer 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 );
});

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

实施例

9 个答案: