如何使元素单击(针对整个文档)?

2020/11/06 17:42 · javascript ·  · 0评论

我想在单击的HTML文档中获取当前元素(无论是哪个元素)。我在用:

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

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

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

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

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

您需要使用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);

另外,请确保是否需要使用<IE9attachEvent()代替addEventListener()

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

在body标签内使用以下内容

<body onclick="theFunction(event)">

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

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

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

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

参考文献:

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

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

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

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

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}
$(document).click(function (e) {
    alert($(e.target).text());
});

这是一个使用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 );
});
本文地址:http://javascript.askforanswer.com/ruheshiyuansudanjizhenduizhenggewendang.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!