Javascript 仅具有event.target的目标父级？

HTML:

JS:

---

如中所示，在单击子级时，它不会将类应用于触发函数的父级，而是将其应用于子级。我想知道如何避免这种情况，并将其应用于父级，无论我在其中单击什么位置。我试图避免使用

document.getElement ByClass/Id

方法。
有任何帮助吗？

您可以使用引用处理事件的元素

当事件遍历DOM时，标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的

event.target

---

但是，我不会依赖浏览器来提供全局

事件

对象，而是将其传递给函数：

function doSomething() {
    event.target.className = ('myClass');
}

您还可以通过

this

引用处理程序绑定到的元素：

onclick="doSomething(event)"

---

当然，请考虑.< /P> < P>在JavaScript调用中引用“<代码>目标< /代码>：

功能剂量测量（目标）{
target.className=（'myClass'）；
}

#父级{
背景颜色：蓝色；
宽度：100%；
高度：100px；
}
#孩子{
背景颜色：绿色；
宽度：50%；
身高：继承；
}
.myClass{
背景色：红色！重要；
}

---

要获取单击元素的直接父元素，可以使用事件的“路径”数组。Path提供一个数组，该数组按从单击的元素到DOM顶部的升序包含每个元素

但是，很难精确地计算出浏览器对此的支持

var children=document.querySelectorAll（'[id^=“child-“]'），
clickEvent=功能（事件）{
console.log（event.path[0]）；//打印单击的子元素
console.log（event.path[1]）；//打印父级
event.path[1].classList.toggle（'row'）；//切换父级的行或列模式
event.path[0].classList.toggle（'selected'）；//切换子对象的颜色
};
children.forEach（函数（child）{
addEventListener（'click'，clickEvent）；
});

孩子一
孩子二
孩子三
孩子四
五岁小孩
P.S.我很讨厌这些问题的标题，
event.target
不是指安装处理程序的元素，而是指触发事件的元素。这就是它的工作原理。如果您不想这样做，请不要使用
event.target
（而是
this
或
event.currentTarget
或其他任何东西）
function doSomething() {
    event.target.className = ('myClass');
}

onclick="doSomething(event)"

onclick="doSomething(event, this)"