下面提供了我自己的答案
如何获取与特定元素类型关联的祖先 ID? (特别要求:使用 JavaScript 的解决方案,如果可能,不要使用 jQuery)。
现在我才刚刚开始编写代码,我的位置是:
document.onclick = clickHandler;
function clickHandler(e){
console.log(e.target);
}
我想知道从这里到哪里可以获得我正在寻找的具体信息
我的页面上有一系列带有唯一 ID 的 ARTICLE 标记(box_1、box_2 等...)。我们的愿望是单击这些文章中的任意位置,并找出哪篇文章已被单击。这是因为我想根据单击的内容来操作特定文章的样式和属性。
我的逻辑是这样的:
记录点击。 如果点击位于框中_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;
最佳答案
您可以在 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;
}
关于javascript - 使用 JavaScript 从 onclick 获取祖先元素的 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27160590/