Question

我尝试开发一个script，只要点击一个元素就会运行一个函数（这包括点击的children）。

在这种情况下，页面只需要提醒"done"。但是，出于某种原因 - 尽管它都被正确编程（至少据我所知） - 它仍然不希望按预期工作。

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

小提琴参考：JsFiddle

所有帮助表示赞赏，干杯。

Answer 1

第二个for循环的条件评估为false，因为<html>不是.children中<a>元素的document之一1}}。

在document元素的单个<a>元素的边界之外单击<html>时，单击"a"元素。

使用现有代码，您可以使用Element.closest()与选择器else { if (e.target.closest("a") !== null) { // do stuff } }

<a>

或检查e.path元素是否在$('selector').on('click tap', function(e) { e.preventDefault(); });

中

Answer 2

因此，如果我正确理解您的问题，您希望在点击<a>时执行某些操作，并且还会点击<a>的子项。

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标记。

Answer 3

我认为这是你想要的最佳方法您已经在搜索<a>，然后搜索您在找到的每个<a>内点击的标记。

document.onclick = function(e){ // on document click
    var links = document.getElementsByTagName("a"); // get all links on page
  
    for(var link of links){ //loop through each a element found
      var tags = link.getElementsByTagName(e.target.tagName); //get all tags within "link" with the same tag as the selected element
      for(var tag of tags){
        if(e.target === tag){
          e.preventDefault();
          alert("done");
        }
      }
    }
}

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

或者，你可以使用递归，你的代码只寻找孩子，但孩子的孩子呢？参见示例：

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 {
            searchChildren(e, links[i]);
        }
    }
}

function searchChildren(e, parent){
  for(var x = 0; x < parent.children.length; x++){
    if(e.target === parent.children[x]){
      e.preventDefault();
      alert("done");
      break;
    }else if(parent.children[x].hasChildNodes()){
      searchChildren(e, parent.children[x]);
    }
  }
}

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

如果target是child，则函数不运行

3 个答案: