Können Sie mit event.target auf ein übergeordnetes Element eines Elements abzielen?

85

Ich versuche, das innerHTML meiner Seite so zu ändern, dass es das innerHTML des Elements wird, auf das ich klicke. Das einzige Problem ist, dass ich möchte, dass es das gesamte Element übernimmt, wie z.

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

Während der Code, den ich in Javascript geschrieben habe:

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

zielt auf das spezifische Element ab, auf das ich klicke.

Was ich erreichen möchte, ist, wenn ich auf eine beliebige Stelle im <section>Element klicke, dass das innerHTML des gesamten Elements und nicht das spezifische Element, auf das ich geklickt habe, verwendet wird.

Ich würde annehmen, dass es etwas mit der Auswahl des übergeordneten Elements des angeklickten Elements zu tun hat, aber ich bin mir nicht sicher und kann online nichts finden.

Wenn möglich, möchte ich mich von JQuery fernhalten

javascript html

— Adam
quelle

158

Ich denke, was Sie brauchen, ist die zu verwenden event.currentTarget. Dies enthält das Element, das tatsächlich den Ereignis-Listener enthält. Wenn also das Ganze <section>den Ereignislistener hat, event.targetwird das angeklickte Element sein, das <section>wird in event.currentTarget.

Andernfalls parentNodekönnte es das sein, wonach Sie suchen.

Link zu currentTarget
Link zu parentNode

— donnywals
quelle

5

Das hat genau das getan, was ich wollte, danke! Ich werde die Antwort akzeptieren, sobald der Timer abgelaufen ist.

— Adam

2

save me day!, event.target ist das kleinste Tag bei der Maus, event.currentTarget ist das mit ausgelöstem Ereignis

— datdinhquoc

1

Scheint kontraintuitiv. Ich würde denken, currentTargetsollte das angeklickte Element darstellen, während es das sein targetsollte, worauf das Ereignis eingestellt war.

— Randall Coding

Das war genau das, wonach ich gesucht habe. Danke zuerst, aber ich habe eine Frage: Wenn ich das Ereignisobjekt in meiner Funktion protokolliere, ist das aktuelle Ziel null, aber ich kann die ID trotzdem aus meinem Datensatzattribut abrufen. Ist das protokollierte Ereignis ist immer noch das gleiche e.target?

— a_m_dev

53

Um das übergeordnete Element eines Elements zu verwenden, verwenden Sie parentElement:

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

— KJ Preis
quelle

2

Während dies die Frage von OP beantwortet, denke ich, dass das Problem von OP mit gelöst werden sollte currentTarget.

— Donnywals

Dies gab mir das übergeordnete Element der obersten Ebene, nach dem ich nicht gesucht habe. Trotzdem danke ich Ihnen, dass ich dies für meine zukünftige Codierung berücksichtigen werde

— Adam

10

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

Beispiele: 1. document.body.addEventListener("click", getParent, false);Gibt das übergeordnete Element des aktuellen Elements zurück, auf das Sie geklickt haben.

Wenn Sie innerhalb einer Funktion verwenden möchten, übergeben Sie Ihr Ereignis und rufen Sie die Funktion wie folgt auf: function yourFunction(event){ var parentElement = getParent(event); }

— Abdul Alim
quelle

8

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

— David
quelle

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
quelle

-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
quelle