Czy możesz kierować na element nadrzędny elementów za pomocą zdarzenia event.target?

85

Próbuję zmienić innerHTML mojej strony, aby stał się innerHTML elementu, na który klikam, jedynym problemem jest to, że chcę, aby zajmował cały element, taki jak:

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

Natomiast kod, który napisałem w javascript: 

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

będzie kierować reklamy na konkretny element, który kliknę.

To, co chciałbym osiągnąć, to kliknięcie w dowolnym miejscu <section>elementu, że zajmie on wewnętrzny kod HTML całego elementu, a nie ten, który kliknąłem.

Przypuszczam, że ma to związek z wybraniem elementu nadrzędnego tego, który został kliknięty, ale nie jestem pewien i nie mogę znaleźć niczego w Internecie.

Jeśli to możliwe, chciałbym trzymać się z dala od JQuery

javascript html Adam
źródło

Odpowiedzi:

152

Myślę, że to, czego potrzebujesz, to użyć event.currentTarget. Będzie zawierał element, który faktycznie ma detektor zdarzeń. Więc jeśli całość <section>ma eventlistener event.targetbędzie klikniętym elementem, to <section>będzie w event.currentTarget.

W przeciwnym razie parentNodemoże być tym, czego szukasz.

łącze do currentTarget
łącze do parentNode

donnywals
źródło
5
Zrobiło dokładnie to, czego chciałem, dziękuję! Przyjmę odpowiedź, gdy skończy się czas.
Adam
2
uratował mnie dzień !, event.target to najmniejszy tag w myszy, event.currentTarget to ten, w którym zostało wywołane zdarzenie
datdinhquoc
1
Wydaje się sprzeczne z intuicją. Myślę, że currentTargetpowinien reprezentować kliknięty element, a targetpowinien być tym, na co wydarzenie zostało ustawione.
Randall Coding
to było dokładnie to, czego szukałem, dziękuję najpierw, ale mam jedno pytanie, kiedy loguję obiekt zdarzenia w mojej funkcji, currentTarget ma wartość null, ale nadal jestem w stanie uzyskać identyfikator z mojego atrybutu dataset, to zarejestrowane zdarzenie nadal jest to samo e.target?
a_m_dev
52

Aby użyć rodzica elementu, użyj parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}
Cena KJ
źródło
2
Chociaż jest to odpowiedź na pytanie OP, myślę, że problem OP powinien zostać rozwiązany currentTarget.
donnywals
To dało mi element nadrzędny najwyższego poziomu, który nie jest tym, czego szukałem, w każdym razie dziękuję, będę o tym pamiętać podczas mojego przyszłego kodowania
Adam
10 
function getParent(event)
{
   return event.target.parentNode;
}

Przykłady: 1. document.body.addEventListener("click", getParent, false);zwraca element nadrzędny aktualnie klikniętego elementu.

  1. Jeśli chcesz użyć wewnątrz dowolnej funkcji, przekaż swoje zdarzenie i wywołaj funkcję w ten sposób: function yourFunction(event){ var parentElement = getParent(event); }
Abdul Alim
źródło
8 
handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}
David
źródło
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
źródło
-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
źródło