Event.target kullanarak bir öğe üst öğesini hedefleyebilir misiniz?

87

Sayfamın innerHTML'sini tıkladığım öğenin internalHTML'i olacak şekilde değiştirmeye çalışıyorum, tek sorun şu gibi tüm öğeyi almasını istememdir:

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

Oysa javascript'te yazdığım kod:

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

tıkladığım belirli öğeyi hedefleyecektir.

<section>Öğenin herhangi bir yerine tıkladığımda, tıkladığım belirli bir öğenin yerine tüm öğenin iç HTML'sini almasıdır.

Tıklanan öğenin ana öğesini seçmekle ilgisi olduğunu varsayabilirim, ancak emin değilim ve çevrimiçi bir şey bulamıyorum.

Mümkünse JQuery'den uzak durmak isterim

javascript html

— Adam
kaynak

163

Sanırım ihtiyacın olan şey event.currentTarget. Bu, olay dinleyicisine sahip olan öğeyi içerecektir. Bütün Yani <section>EventListener sahiptir event.targettıklanan eleman olacak, <section>olacak event.currentTarget.

Aksi takdirde parentNodearadığınız şey olabilir.

parentNode'a currentTarget
bağlantısına bağlantı

— Donnywals
kaynak

5

Bu tam olarak istediğimi yaptı, teşekkür ederim! Zamanlayıcı dolduğunda cevabı kabul edeceğim.

— Adam

2

beni gün kurtardı !, event.target faredeki en küçük etiket, event.currentTarget, tetiklenen olayın olduğu etiket

— datdinhquoc

1

Karşıt-sezgisel görünüyor. Bence currentTargettıklanan öğeyi temsil etmelidir, oysa targetolayın üzerine kurulduğu şey olmalıdır.

— Randall Kodlama

tam olarak aradığım şey buydu, önce teşekkür ederim, ancak bir sorum var, olay nesnesini işlevimde günlüğe kaydettiğimde, currentTarget boş ama yine de veri kümesi özniteliğimden kimliği alabiliyorum, günlüğe kaydedilen olay hala aynı e.target mı?

— a_m_dev

53

Bir elemanın ebeveynini kullanmak için şunu kullanın parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

— KJ Değeri
kaynak

2

Bu OP'nin sorusunu cevaplarken, OP'nin probleminin çözülmesi gerektiğini düşünüyorum currentTarget.

— donnywals

Bu bana aradığım şey olmayan en üst düzey ana öğeyi verdi, yine de bunu gelecekteki kodlamam için aklımda tutacağım

— Adam

10

function getParent(event)
{
   return event.target.parentNode;
}

Örnekler: 1. document.body.addEventListener("click", getParent, false);Tıkladığınız geçerli öğenin üst öğesini döndürür.

Herhangi bir işlevin içinde kullanmak istiyorsanız, olayınızı iletin ve işlevi şu şekilde çağırın: function yourFunction(event){ var parentElement = getParent(event); }

— Abdul Alim
kaynak

8

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

— David
kaynak

0

$(document).on("click", function(event){
   var a = $(event.target).parents();
   var flaghide = true;
    a.each(function(index, val){
       if(val == $(container)[0]){
           flaghide = false;
        }
    });
    if(flaghide == true){
        //required code
    }
})

— Shubham Rungta
kaynak

-1

var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}

— Vanga Kiran Kumar Reddy
kaynak