Question

我自己提供的答案

如何将祖先ID与特定元素类型绑定？（特殊要求：JavaScript中的解决方案，如果可能的话，不是jQuery中的解决方案。）

现在我只是开始编码，我在：

document.onclick = clickHandler;

function clickHandler(e){
    console.log(e.target);
}

我想知道从哪里可以获得我正在寻找的具体信息

我的页面上有一系列带有唯一ID的ARTICLE标签（box_1，box_2等等）。希望点击任何这些文章的任何地方，并找出已点击的文章。这是因为我想根据点击的内容来操纵特定文章的样式和属性。

我的逻辑是：

记录点击。如果点击在box_ n 中操纵

的大小/位置

<article id="box_*n*"></article>

另外，如果它有帮助，我并不是完全有必要尝试在文档级别捕获点击次数，但我认为无论我点击哪里，这些信息都可用。

我的回答： 基本上这将告诉你所有你点击的父母元素，对我来说，我在我的文章上停止并获取他们的ID。谢谢大家的投入！

function clickHandler(e){
  var boxName = e.target;
  isArticle(boxName);
}

function isArticle(boxName){
  if (boxName.tagName === "ARTICLE"){
    console.log(boxName.id);
  } else if(boxName.parentNode){
    boxName = boxName.parentNode;
    isArticle(boxName);
    console.log(boxName);
  }
}

document.onclick = clickHandler;

Answer 1

您可以在body元素上放置一个侦听器，然后使用相关的Event对象来查找任何祖先文章元素，例如

<body onclick="getArticle(event)" ...>

然后功能：

function getArticle(event) {
  var target = event.target || event.srcElement;
  var article;

  if (target) {
    article = upTo(target, 'article');
  }

  if (article) {
    // do stuff with article
  }
}

// Find first ancestor of el with tagName
// or null if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

Answer 2

点击您的点击事件：

使用css类标记每个div（如果cssclass不包含任何样式，则为事件）然后通过 getElementsByClassName （https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName）找到所有这些元素

为每个元素获取id并继续使用您的逻辑

Answer 3

您真正想要做的只是捕获文章的点击次数。

var articles = document.querySelectorAll("article");//select all article elements
for(var i = 0; i < articles.length; i++){//iterate set of articles
 articles[i].onclick = function(){//assign a click event to each article
  var currentArticle = this;//when clicked, you can work with the article element
  var currentId = this.id;//when clicked, you can access article properties like id
 };
}

Answer 4

看看我的代码，它可能对你有帮助。

<article id="box_1" onclick="clicked(this)">Box 1 content</article>
<article id="box_2" onclick="clicked(this)">Box 2 content</article>
<article id="box_3" onclick="clicked(this)">Box 3 content</article>

<script>
function clicked(clickedBox) { //get the box clicked
   clickedBox.style.fontSize="24px"; //change the font size of the box clicked
}
</script>

使用JavaScript从onclick获取ancestor元素的id

4 个答案: