6

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Austin Griner
  • 177
  • 1
  • 1
  • 7
  • P.S. I suck at titling these questions – Austin Griner Aug 19 '15 at 21:32
  • Well, `event.target` doesn't refer to the element that the handler was installed on, but to the element that the event was triggered on. That's just how it works. If you don't want that, don't use `event.target` (but rather `this` or `event.currentTarget` or whatever) – Bergi Aug 19 '15 at 21:38

3 Answers3

15

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.

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
0

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>
Wes Foster
  • 8,770
  • 5
  • 42
  • 62
0

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>
Sgiobair
  • 305
  • 2
  • 9