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

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


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"
}

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); }

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

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
    }
})

-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);    
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.