在点击事件中获取所有标记名称

我编写了一个代码，将点击事件添加到带有js的页面中的所有标记。在点击事件中获取所有标记名称

function modifyText(obj) { 
    console.log(obj.target.tagName); 
} 

var el = document.body.getElementsByTagName("*"); 
console.log(el); 
for (var i=0 ;i<el.length; i++){ 
    el[i].addEventListener("click", modifyText, false); 
}

在modifyText函数我想要得到任何标签点击它。例如，在这个网站

<div> 


    <h3> 
    <b>salaaaaam<i> this is a test</i> </b>for add a click event to all tags in pages. 
    </h3> 

</div>

我想打印 “I，B，H3，DIV” 当点击

这是一个测试

，但我得到的东西像这个“我，我，我，我”。

JSFIDDLE

任何人可以帮助吗？谢谢。

来源

2016-02-29 Karim Pazoki

use var el = document.querySelectorAll（“*”）; https://jsfiddle.net/1rch163p/6/ – jeff

将'obj.target.tagName'改为'this.tagName' - 'this'将引用冒泡顺序中的当前元素，而'target'将始终引用始发元素。 – BatScream

不，这是不同的。 @Endless –

这是因为event.target将引用实际触发事件的元素。

您可以使用this或event.currentTarget来引用处理程序绑定到的元素。

function modifyText(e) { 
 
    snippet.log(this.tagName + ' || ' + e.currentTarget.tagName); 
 
} 
 

 
var el = document.body.getElementsByTagName("*"); 
 
console.log(el); 
 
for (var i = 0; i < el.length; i++) { 
 
    el[i].addEventListener("click", modifyText, false); 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<div> 
 
    <h3> 
 
    <b>salaaaaam<i> this is a test</i> </b>for add a click event to all tags in pages. 
 
    </h3> 
 
</div>

来源

2016-02-29 07:58:18

function getTextNode(p) { 
    p.onclick = function modifyText(obj) { 
     console.log(obj.target.tagName); 
    } 
    var childArr = p.childNodes; 
    for (var i = 0; i < childArr.length; i++) { 
     textNodeArr = getTextNode(childArr[i]); 
    } 
    return; 
} 

arr = getTextNode(document.body);

来源

2016-02-29 08:08:15

添加监听器把所有的元素是相当昂贵的，并且不会为新增加的内容合作什么，我会做的是在上面添加一个监听器，并从那里

去

document.addEventListener('click', evt => { 
    var elm = evt.target 
    var els = [] 
    while (elm.tagName) { 
     els.push(elm.tagName) 
     elm = elm.parentNode 
    } 
    alert(els) 
}, false)

来源

2016-02-29 08:12:13 Endless

在点击事件中获取所有标记名称

回答

相关问题