Question

HTML：

<div onclick="doSomething()" id="parent">
    <div id="child"></div>
</div>

CSS：

#parent {
    background-color: blue;
    width: 100%;
    height: 100px;
}

#child {
    background-color: green;
    width: 50%;
    height: inherit;
}

.myClass {
    background-color: red !important;
}

JS：

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

正如您在this JSFIDDLE中看到的那样，在单击子项时，不是将该类应用于触发该函数的父项，而是将其应用于子项。我想知道如何避免这种情况并将其应用于父母，无论我在哪里点击它。我试图避免使用document.getElement(s)ByClass/Id方法。
任何帮助？

Answer 1

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

在事件遍历DOM时标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

但是，我不会依赖浏览器来提供全局event对象，而是将其传递给函数：

onclick="doSomething(event)"

您还可以使用this：

来引用处理程序绑定的元素

onclick="doSomething(event, this)"

当然请考虑not use inline event handlers。

Answer 2

如果使用addEventListener来处理事件而不是内联版本，则回调的this将指向声明事件的元素（#parent） - fiddle：< / p>

<div id="parent">
    <div id="child"></div>
</div>

将此代码放在正文的末尾或DOMContentLoaded事件处理程序中：

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

document.getElementById('parent').addEventListener('click', doSomething);

Answer 3

只需在您的javascript调用中引用target：

＆＃13;

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

＆＃13;

#parent {
    background-color: blue;
    width: 100%;
    height: 100px;
}

#child {
    background-color: green;
    width: 50%;
    height: inherit;
}

.myClass {
    background-color: red !important;
}

＆＃13;

<div onclick="doSomething(this)" id="parent">
    <div id="child"></div>
</div>

＆＃13;

Answer 4

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

虽然无法确定浏览器的确切支持。

var children = document.querySelectorAll('[id^="child-"]'),
  clickEvent = function(event) {
    console.log(event.path[0]); //prints clicked child element
    console.log(event.path[1]); //prints parent

    event.path[1].classList.toggle('row'); //toggles row or column mode of parent
    event.path[0].classList.toggle('selected'); //toggles color of child
  };

children.forEach(function(child) {
  child.addEventListener('click', clickEvent);
});

<div id="parent">
  <div id="child-1">Child One</div>
  <div id="child-2">Child Two</div>
  <div id="child-3">Child Three</div>
  <div id="child-4">Child Four</div>
  <div id="child-5">Child Five</div>
</div>

只有event.target的目标父级？

4 个答案: