Solo genitore target con 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'); 
} 

Come si può vedere nel this JSFIDDLE, dopo aver fatto clic il bambino, invece di applicare la classe al genitore che attiva la funzione, la applica al bambino. Voglio sapere come evitare questo e applicarlo al genitore, non importa dove faccio clic all'interno di esso. Sto cercando di evitare l'uso del metodo document.getElement(s)ByClass/Id.
Qualche aiuto?

Answer 1

È possibile fare riferimento all'elemento che gestisce l'evento con currentTarget.

Identifica il target corrente per l'evento, poiché l'evento attraversa il DOM. Fa sempre riferimento all'elemento a cui è stato collegato il gestore eventi anziché a event.target che identifica l'elemento su cui si è verificato l'evento.

---

Tuttavia, invece di fare affidamento sul browser per fornire una event oggetto globale, vorrei passare alla funzione:

onclick="doSomething(event)" 

È inoltre possibile fare riferimento all'elemento del gestore è legata a con this:

onclick="doSomething(event, this)" 

Naturalmente perche a not use inline event handlers.

Answer 2

Proprio riferimento il target nella chiamata javascript:

function doSomething(target) { 
 
\t 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

Se si usa addEventListener per gestire l'evento invece della versione in linea, quindi il this della richiamata punterà alla elemento su cui è stato dichiarato l'evento (#parent) - fiddle:

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

inserire questo codice alla fine del corpo o in DOMContentLoaded gestore di eventi:

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

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

Answer 4

Per ottenere l'elemento padre immediato dell'elemento cliccato è possibile utilizzare la matrice 'percorso' della manifestazione. Path fornisce un array che include ogni elemento in ordine crescente dall'elemento su cui hai fatto clic sulla parte superiore del DOM.

Problemi con l'elaborazione del supporto browser esatto per questo però.

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>