如何使元素单击（针对整个文档）？

150

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

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

但是非常奇怪的是，我得到了整个文档的文本，而不是单击的元素。

如何仅获取我单击的元素？

例

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

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

— 用户名
source

2

处理程序函数在其添加到的元素的范围内执行，此处为文档。您将需要获取target事件对象的属性。

— Bergi 2012年

238

您需要使用event.targetwhich是最初触发事件的元素。在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);

另外，请确保是否需要使用<IE9 attachEvent()代替addEventListener()。

— 亚历克斯
source

1

我发现返回的元素以某种方式略有不同，因此我无须if(event.target === myjQueryDivElement)做：if(event.target.hasClass('mydivclass'))mydivclass是我的元素具有的类。

— redfox05 2014年

我已经在Safari中寻找工作了3天，最终我偶然发现了这篇文章。你们都很感谢

— Raymond Feliciano

3

@alex嘿，应该|| target.innerText吗？

— Jevgeni Smirnov

30

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

— 乙肝病毒
source

26

在body标签内使用以下内容

<body onclick="theFunction(event)">

然后在javascript中使用以下功能获取ID

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

— 马莱克·图拜萨特（Malek Tubaisaht）
source

7

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

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

参考文献：

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

— 彼得·保罗·范·格默登
source

3

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

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

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

— 贾奥德
source

2

在这个时代on()应该提到的应该被推荐超过delegate()。另外，document可能是唯一不使用delegate()/的例外，on()因为它们一直冒泡到处理的最高点。

— Alex

好决定。在我的日常工作中，我们还没有升级到最新的jQuery，所以让on我无所适从。

— JAAulde 2012年

1

@alex，因为无论如何事件都是冒泡的，并且无论处理程序都必须运行，所以这不是一个例外吗？并不是所有都不同。我想delegate确实有要考虑的过滤开销……

— JAAulde 2012年

2

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

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

— Aft3rL1f3
source

1

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

-2

这是一个使用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 );
});

— 亨利·洛克特
source