Question

我试图提出一个解决方案，让我知道每当一个＆＃34; A＆＃34;标记（或＆＃34; A＆＃34;标记内的任何其他标记）被单击。

例如：

<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="#">Link 3</img></a>

到目前为止，我有这个：

<script>
document.getElementsByTagName("BODY")[0].addEventListener('click', function(e) {
if(e.target && e.target.tagName == "A") {
console.log(e.target.text); }
}, false);
</script>

这将返回链接1的文本，但不会返回链接2和3.如果有人点击没有锚标记的span或img元素，我也不想获取任何文本。

Answer 1

.target返回单击的元素。在链接2的情况下，这将始终是span标记;在链接3的正确格式版本上，有时它将是a标记，有时它会是img标记，具体取决于您点击的位置。为了确定.target是否在您需要使用parentNode爬上DOM树，直到您到达a节点或文档本身（具有{{} 1 {} .parentNode。

null

您应该使用.textContent。

使用querySelector抓取身体更容易，除非您需要支持IE7或更低版本。

还应注意，为var getParentAnchor = function (element) { while (element !== null) { if (element.tagName.toUpperCase() === "A") { return element; } element = element.parentNode; } return null; }; document.querySelector("body").addEventListener('click', function(e) { var anchor = getParentAnchor(e.target); if(anchor !== null) { console.log(anchor.textContent); } }, false);标记设置结束标记无效，您的HTML应如下所示：

img

jsFiddle

<强>更新如果您不需要支持IE (or Opera mini)，则可以使用Element.closest方法简化代码。您可以完全摆脱<a href="#">Link 1</a> <a href="#"><span>Link 2</span></a> <a href="#"><img src="example.jpg">Link 3</a>并将其替换为单个getParentAnchor调用，从而缩短代码：

.closest

jsFiddle

Answer 2

[].forEach.call(document.getElementsByTagName("a"),function(el){
  el.addEventListener("click",function(e){
    console.log(el.text);
  });
});

此代码将为您完成工作。这将为所有标签提供附加点击事件。您可以通过el.text来定位。

中的文本

使用eventListener捕获所有A标签的点击次数

2 个答案: