Javascript 获取高阶块'；单击时的id

我有一个高阶块和一个嵌套块。我希望在单击时获得

父级

的

id

，但它的

子级

似乎是一个事件目标

如何使JS将<代码>父/代码>作为事件目标，或以某种方式获得它的<代码> ID <代码>。p>

• 我无法明确指定所需的DOM块（

  ，例如document.getElementById（…）

  ），因为它们是动态显示的

• 父项

  可能不是子项的直接父项

函数saveID（e）{
const display=document.getElementById（“显示”）；
if（如target.id）{
display.innerHTML=（`Parent的键是：${e.target.id}`）；
}否则{
display.innerHTML=“不会发生”；
}
}

.parent{
边框：1px纯黑；
光标：指针；
显示：内联块；
}
.孩子{
边框：2件纯色浅蓝色；
填充：5px15px；
过渡：所有0.3秒的缓进缓出；
}
.孩子：悬停{
背景颜色：浅绿色；
边框颜色：绿色；
}
#展示{
边框：1px纯色灰色；
高度：50px；
边缘顶部：10px；
填充物：5px10px；
宽度：83px；
}

嘿！

您需要在target上使用

currentTarget

，因为它提供了定义

onclick

事件的元素

function saveID(e) {
  const display = document.getElementById("display");

  if (e.currentTarget.id) {
    display.innerHTML = (`Parent's key is: ${e.target.id}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

---

您需要在target上使用

currentTarget

，因为它提供了定义

onclick

事件的元素

function saveID(e) {
  const display = document.getElementById("display");

  if (e.currentTarget.id) {
    display.innerHTML = (`Parent's key is: ${e.target.id}`);
  } else {
    display.innerHTML = "Won't happen";
  }
}

---

如果希望在单击子项时获得父id，请将onclick添加到子项，然后

e.target.parentNode.id

获取父id

函数saveID（e）{
const display=document.getElementById（“显示”）；
if（如target.id）{
display.innerHTML=（`Parent的键是：${e.target.parentNode.id}`）；
}否则{
display.innerHTML=“不会发生”；
}
}

.parent{
边框：1px纯黑；
光标：指针；
显示：内联块；
}
.孩子{
边框：2件纯色浅蓝色；
填充：5px15px；
过渡：所有0.3秒的缓进缓出；
}
.孩子：悬停{
背景颜色：浅绿色；
边框颜色：绿色；
}
#展示{
边框：1px纯色灰色；
高度：50px；
边缘顶部：10px；
填充物：5px10px；
宽度：83px；
}

嘿！

如果要在单击子项时获得父项id，请将onclick添加到子项，然后

e.target.parentNode.id

获取父项id

函数saveID（e）{
const display=document.getElementById（“显示”）；
if（如target.id）{
display.innerHTML=（`Parent的键是：${e.target.parentNode.id}`）；
}否则{
display.innerHTML=“不会发生”；
}
}

.parent{
边框：1px纯黑；
光标：指针；
显示：内联块；
}
.孩子{
边框：2件纯色浅蓝色；
填充：5px15px；
过渡：所有0.3秒的缓进缓出；
}
.孩子：悬停{
背景颜色：浅绿色；
边框颜色：绿色；
}
#展示{
边框：1px纯色灰色；
高度：50px；
边缘顶部：10px；
填充物：5px10px；
宽度：83px；
}

嘿！

从classname获取id属性值

函数saveID（）{
const display=document.getElementById（“显示”）；
var res=document.getElementsByClassName（“父项”）[0].getAttribute（'id'）；
//从classname中获取id属性值
如果（res）{
display.innerHTML=（`父项的键为：${res}`）；
}否则{
display.innerHTML=“不会发生”；
}
}

.parent{
边框：1px纯黑；
光标：指针；
显示：内联块；
}
.孩子{
边框：2件纯色浅蓝色；
填充：5px15px；
过渡：所有0.3秒的缓进缓出；
}
.孩子：悬停{
背景颜色：浅绿色；
边框颜色：绿色；
}
#展示{
边框：1px纯色灰色；
高度：50px；
边缘顶部：10px；
填充物：5px10px；
宽度：83px；
}

嘿！

从classname获取id属性值

函数saveID（）{
const display=document.getElementById（“显示”）；
var res=document.getElementsByClassName（“父项”）[0].getAttribute（'id'）；
//从classname中获取id属性值
如果（res）{
display.innerHTML=（`父项的键为：${res}`）；
}否则{
display.innerHTML=“不会发生”；
}
}

.parent{
边框：1px纯黑；
光标：指针；
显示：内联块；
}
.孩子{
边框：2件纯色浅蓝色；
填充：5px15px；
过渡：所有0.3秒的缓进缓出；
}
.孩子：悬停{
背景颜色：浅绿色；
边框颜色：绿色；
}
#展示{
边框：1px纯色灰色；
高度：50px；
边缘顶部：10px；
填充物：5px10px；
宽度：83px；
}

嘿！

谢谢！它完美地工作了！非常感谢。它完美地工作了！