Yalnızca event.target ile ebeveyni hedefle?

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: Eğer çocuğu tıklayarak, yerine ebeveyne sınıfını başvurusu üzerine this JSFIDDLE içinde

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

görebileceğiniz gibi hangi işlevi tetikler, çocuğa uygular. Bunu nasıl önleyeceğimi bilmek ve içerisine tıklamam nerede olursa olsun onu ana bilgisayara uygulamak istiyorum. document.getElement(s)ByClass/Id yöntemini kullanmaktan kaçınmaya çalışıyorum.
Herhangi bir yardım?

Answer 1

Olayı işleyen öğeye currentTarget ile başvurabilirsiniz.

Etkinlik, DOM'ı geçtikçe etkinlik için geçerli hedefi tanımlar. Her zaman olay işleyicisinin olayın gerçekleştiği öğeyi tanımlayan event.target'un aksine eklendiği öğeye başvurur. işleyicisi sınırdır

onclick="doSomething(event)" 

Ayrıca öğesine referans verebilir:

---

Ancak, bunun yerine küresel event nesneyi sağlamak için tarayıcı üzerinde güvenmek, ben işlevine geçerdi this ile karşı:

onclick="doSomething(event, this)" 

tabii not use inline event handlers düşünün lütfen.

Answer 2

Sadece javascript çağrısı target başvuru: yerine satır içi versiyonunun olayı işlemek için addEventListener kullanırsanız

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

ardından geri arama this işaret edecek Olayın bildirildiği öğe (#parent) - fiddle:

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

gövdenin sonunda bu kod yerleştirin veya DOMContentLoaded olay işleyicisi:

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

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

Answer 4

etkinliğin 'yol' dizisini kullanabilirsiniz tıklanan elemanın hemen üst elemanı almak için. Yol, her öğeyi DOM'ın üstüne tıklattığınız öğeden artan düzende içeren bir dizi sağlar.

Bunun için tam tarayıcı desteğini çalışırken sorun yaşıyorsanız.

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>