139

I am trying to change the innerHTML of my page to become the innerHTML of the element I click on, the only problem is that i want it to take the whole element such as:

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

Whereas the code that i have written in javascript:

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

will target the specific element that i click on.

What i would like to achieve is when i click on anywhere in the <section> element, that it will take the innerHTML of the whole element rather than the specific one that i have clicked.

I would presume it is something to do with selecting the parent element of the one that is clicked but i am not sure and can't find anything online.

If possible i would like to stay away from JQuery

6 Answers 6

266

I think what you need is to use the event.currentTarget. This will contain the element that actually has the event listener. So if the whole <section> has the eventlistener event.target will be the clicked element, the <section> will be in event.currentTarget.

Otherwise parentNode might be what you're looking for.

link to currentTarget
link to parentNode

3
  • 5
    saved me day!, event.target is the smallest tag at mouse, event.currentTarget is the one with event triggered
    – Dee
    Jun 24, 2019 at 3:31
  • 1
    Seems counter-intuitive. I would think currentTarget should represent the element clicked, while target should be what the event was set on. Apr 26, 2020 at 14:16
  • that was exactly what i looked for, thank you first, but i have one question, when i log the event object in my function, the currentTarget is null but still i am able to get the id from my dataset attribute, is the logged event still is the same e.target?
    – amdev
    Aug 14, 2020 at 20:55
81

To use the parent of an element use parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}
2
  • 3
    While this answers OP's question, I think OP's problem should be solved with currentTarget.
    – donnywals
    Mar 20, 2015 at 14:26
  • This gave me the top level parent element which is not what i was looking for, thank you anyway i will keep this in mind for my future coding
    – Adam
    Mar 20, 2015 at 14:28
22
handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}
13
function getParent(event)
{
   return event.target.parentNode;
}

Examples: 1. document.body.addEventListener("click", getParent, false); returns the parent element of the current element that you have clicked.

  1. If you want to use inside any function then pass your event and call the function like this : function yourFunction(event){ var parentElement = getParent(event); }
0
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);    
}
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
    }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.