Javascript 如果目标是子级，则函数未运行

我曾尝试开发一个

脚本

，每当单击一个元素时，它都会运行一个函数（这包括被单击的

子元素

）

在这种情况下，页面只需提醒

“完成”

。然而，出于某种原因- 尽管这一切都被正确编程（至少就我所知），它仍然不希望像预期的那样工作

HTML:

<a href="/profile.php" class="nav-user-content_profile" onclick="return false;">
    <div class="_user-pfp">
        <img src="http://lorempixel.com/100/100">
    </div>
    <div class="_user-name">
        <span>Username</span>
    </div>
</a>

JavaScript：

document.onclick = function(e){ // on document click
    var links = document.getElementsByTagName("a"); // get all links on page

    for(var i = 0; i < links.length; i++){
        if(e.target === links[i]){ // if clicked link is parent
            e.preventDefault(); // do not redirect
            alert("done"); // alert "done" (this all works)
        } else {
            for(var x = 0; x < links[i].children.length; x++){
                if(e.target === links[i].children[x]){ // if clicked link is child
                    e.preventDefault(); // do not redirect
                    alert("done"); // alert "done" (this does not work)
                }
            }
        }
    }
}

document.onclick=函数（e）{//
var links=document.getElementsByTagName（“a”）；//获取页面上的所有链接
对于（变量i=0；i

供参考的小提琴：

---

感谢所有帮助，干杯。

由于

不是带有选择器

的单个
的
的
子对象，因此
循环的第二个
条件评估为
false

或者检查
元素是否位于
e.path
中，因此，如果我正确理解了您的问题，您希望在单击
以及单击
的子元素时执行一些操作

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'A') {
    e.preventDefault();
    console.log('Link clicked');
  }
  else {
    const el = isParentLink(e.target);
    if (el.tagName == 'A') {
      e.preventDefault();
      console.log('Parent is a link');
    }
  }
});

function isParentLink(node) {
  if (node.tagName == 'A') {
    return node;
  }
  return isParentLink(node.parentElement);
}

此代码段检查target是否为锚元素，如果不是，则检查父元素，直到它到达html标记。
我认为这是实现您所需的最佳方法。

你已经在搜索
为什么不检查
e.target
，如果它是链接，你可以打印“完成”，如果不检查
e.target
的父项，则使用递归函数检查父项，直到它找到
或到达body/html？@andersg这正是我正在做的…不，循环浏览页面上的所有链接，然后与单击的元素进行比较。我可以试着为我的意思创造一个答案：）@andersg加油！可能只会为您赢得几分；）我知道我不应该反对一个名声几乎是我50倍的人（顺便说一句，谢谢你的帮助），但这不应该是一个评论而不是一个回答吗？@GROVER。不知道你是什么意思？在发布问题之前，您知道，在
元素外部单击不会单击任何
。而在
元素的子元素
，而是单击
文档的根节点
：
？您应该能够从那里调整代码，以检查元素标记名是否为
HTML
，或者只使用
else
块。但是，用户在元素内部（在子元素上）单击，并且不会显示警报。它仅在单击元素（但不单击子元素）时有效。
元素不包括在
元素的
.children
中。
元素是
元素的子元素。使用现有代码，您需要使用另一个循环来迭代父元素
的
子元素的
.children
。使用现有代码，您可以使用选择器
“a”
else{if（e.target.closest（“a”）！==null{//do stuff}
或检查
元素是否位于
e.path
如果未单击任何元素，则会引发错误：
无法读取null的属性“tagName”
Hm，我无法在CodePen上重现该属性，但您可以在click函数的开头添加
if（！e.target）{return；}
，以防止出现这种情况。
document.addEventListener('click', function(e) {
  if (e.target.tagName == 'A') {
    e.preventDefault();
    console.log('Link clicked');
  }
  else {
    const el = isParentLink(e.target);
    if (el.tagName == 'A') {
      e.preventDefault();
      console.log('Parent is a link');
    }
  }
});

function isParentLink(node) {
  if (node.tagName == 'A') {
    return node;
  }
  return isParentLink(node.parentElement);
}