Can you target an elements parent element using event.target?

Question

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

score 263 · Accepted Answer · edited Apr 23 '18 at 12:20

263

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

edited Apr 23 '18 at 12:20

Arjan

22,808
11
61
71

answered Mar 20 '15 at 14:24

donnywals

7,241
1
19
27

5

saved me day!, event.target is the smallest tag at mouse, event.currentTarget is the one with event triggered – Dee Jun 24 '19 at 03:31
1

Seems counter-intuitive. I would think `currentTarget` should represent the element clicked, while `target` should be what the event was set on. – Randall Coding Apr 26 '20 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 '20 at 20:55

score 80 · Answer 2 · answered Mar 20 '15 at 14:24

80

To use the parent of an element use parentElement:

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

answered Mar 20 '15 at 14:24

KJ Price

5,774
3
21
34

3

While this answers OP's question, I think OP's problem should be solved with `currentTarget`. – donnywals Mar 20 '15 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 '15 at 14:28

score 22 · Answer 3 · answered Mar 13 '19 at 16:10

22

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

answered Mar 13 '19 at 16:10

David

3,488
2
21
21

score 13 · Answer 4 · answered Mar 20 '15 at 14:48

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.

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

score 0 · Answer 5 · answered Jul 03 '18 at 17:30

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

answered Jul 03 '18 at 17:30

Vanga Kiran Kumar Reddy

158
4
10

score 0 · Answer 6 · answered Apr 15 '20 at 14:48

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

Can you target an elements parent element using event.target?

6 Answers6

Linked

Related