Question

我正在尝试拦截所有a链接点击以执行一些额外的工作，这适用于独立的链接，但当它包含img时，会返回img标记代替。

有没有办法检查上面的元素是否也是a链接，或者我应该采用不同的方式来处理它？</ p>

JS：

  document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

    if (element.tagName == 'A') {
      window.open(element.href, "_system");
      return false;
    }
  };

Answer 1

您可以遍历所点击节点的父节点，以查看祖先是否为A标记

...
var element = e.target || e.srcElement;
while (element.tagName != 'A' && element.parentNode) {
    element = element.parentNode;
}
if (element.tagName == 'A') {
...

Answer 2

您可以在锚标记的click事件上而不是在整个文档上附加处理程序，然后您不需要检查事件目标。

var anchorTags = document.getElementsByClassName("classname");

var myEventHandler = function() {
    // stuff
};

for (var i = 0; i < anchorTags.length; i++) {
    anchorTags[i].onclick = myEventHandler;
}

Answer 3

我不确定您是否需要实际捕获所有点击，但如果您想要捕获实际点击的锚标记，您可以考虑以下方法。

var anchors = document.getElementsByTagName('a');

for(var i = 0, anchor; anchor = anchors[i]; i++ ) {
	anchor.addEventListener('click', function (e){
      e = e ||  window.event;
      //Grabs the element that initiated the event, the anchor tag.
      var element = this; 
      alert(element.tagName);
      if (element.tagName == 'A') {
          window.open(element.href, "_system");
          return false;
      }
  })
}

Answer 4

您应该添加另一个条件来检查当前点击的元素是否是a元素的子元素。

您可以使用 closest 方法。

Element.closest() 方法返回与参数中给出的选择器匹配的当前元素（或当前元素本身）的最近祖先。如果没有这样的祖先，它将返回null。

条件如下：

if (element.tagName == 'A' || element.closest('a') != null) {
     window.open(element.closest('a').href, "_system"); //Using the parent a link `href`
     return false;
}

希望这有帮助。

＆＃13;

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A' || element.closest('a') != null) {
    alert("Open with href :"+element.closest('a').href);
    return false;
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>The below Google text link returns A when clicked, correct!</p>
<a href="google_link">Google Link</a>
<br />
<p>The below Bing image link returns IMG when clicked, incorrect!</p>
<a href="img_link"><img src="data:image/png;base64,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" /></a>
</body>

＆＃13;

图像上的JavaScript链接元素

4 个答案: