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

2019-08-30 09:33:17 阅读：186 来源： 互联网

标签：event-listener javascript event-handling

我正在努力想出一个解决方案,只要点击“A”标签(或“A”标签内的任何其他标签),我就会知道这个解决方案.

例如：

<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元素,我也不想获取任何文本.

解决方法:

.target返回单击的元素.在链接2的情况下,这将始终是span标记;在链接3的正确形式的版本上,有时它将是一个标记,有时它将取决于您点击的地方的img标记.为了弄清楚.target是否在你的内部,你需要使用parentNode爬上DOM树,直到你到达一个节点或文件本身,其.parentNode为null.

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

你应该使用.textContent.

除非你需要支持IE7或更低版本,否则使用querySelector更容易抓住机身.

还应该注意,为img标记设置结束标记是无效的,您的HTML应如下所示：

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

jsFiddle

更新
如果您不需要支持IE (or Opera mini),则可以使用Element.closest方法简化代码.您可以完全摆脱getParentAnchor并将其替换为单个.closest调用,从而缩短代码：

document.querySelector("body").addEventListener('click', function(e) {
  var anchor = e.target.closest('a');
  if(anchor !== null) {
    console.log(anchor.textContent);
  }
}, false);

jsFiddle

标签：event-listener,javascript,event-handling
来源： https://codeday.me/bug/20190830/1767446.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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