Only target parent with 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 , after clicking on the child, instead of applying the class to the parent that runs the function, this is applied to the child. I want to know how to avoid this and apply it to my parents, no matter where I click on 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 processes the event using currentTarget .

Defines the current target for the event as the event traverses the DOM. It always refers to the element to which the event handler is bound, and not to event.target , which identifies the element in 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 with which the handler is bound to this :

 onclick="doSomething(event, this)" 

Of course, consider not using built-in event handlers .

Answer 2

Just specify 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 3

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

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

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

 function doSomething() { this.className = 'myClass'; } document.getElementById('parent').addEventListener('click', doSomething); 

Answer 4

To get the immediate parent of the clicked element, you can use the "path" array of this event. The path provides an array that includes each element in ascending order from the element that you clicked on the top of the DOM.

Failed to create accurate browser support for this.

 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>