Question

我编写了一个代码，使用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函数中，我想获取点击它的任何标记。例如在这个html中

<div>


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

</div>

我想打印＆＃34; I，B，H3，DIV＆＃34;点击

时

这是一个测试

但是我得到了类似的东西＆＃34;我，我，我，我＆＃34;。

JSFIDDLE

有人可以帮忙吗？感谢。

Answer 1

这是因为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>

Answer 2

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

Answer 3

向所有元素添加侦听器非常昂贵，并且不适用于新添加的元素我要做的是在顶部添加一个监听器并从那里开始

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

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

3 个答案: