只有event.target的目标父级？

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');
}

As you can see in this JSFIDDLE , upon clicking the child, instead of applying the class to the parent which triggers the function, it applies it to the child. I want to know how to avoid this and apply it to the parent no matter where I click inside of it. I am trying to avoid using the document.getElement(s)ByClass/Id method.
Any help?

Answer 1

You can refer to the element that handles the event with currentTarget .

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

---

However, instead of relying on the browser to provide a global event object, I would pass it to the function:

onclick="doSomething(event)"

You can also refer to the element the handler is bound to with this :

onclick="doSomething(event, this)"

Of course please consider to not use inline event handlers .

Answer 2

If you use addEventListener to handle the event instead of the inline version, then the this of the callback will point to the element that the event was declared on (#parent) - fiddle :

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

Put this code at the end of the body or in DOMContentLoaded event handler:

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

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

Answer 3

Just reference the target in your javascript call:

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

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

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

Answer 4

To get the immediate parent element of the clicked element you can use the 'path' array of the event. Path provides an array which includes every element in ascending order from the element you clicked to the top of the DOM.

Having trouble working out the exact browser support for this though.

 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>