CODEWITHSUNDEEP
javascript
Paran0a
Paran0a

Reputation: 3447

Clicking on child does not trigger parent click

When clicking on content I want to trigger my alert. I could have any number of child elements in my content so I don't want to hardcode every single one. I thought that maybe I could listen for clicks on that parent element and then every click on child would trigger my action. But it doesn't work.

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  if (e.target === content  ) {
	alert('clicked!');
} 
});
<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Upvotes: 2

Views: 3516

Answers (6)

Robert W Starkweather
Robert W Starkweather

Reputation: 1

Another alternative is CSS pointer events. You can turn off pointer events on the child elements so the click only registers on the parent.

#wrapper > * { pointer-events: none; }

Upvotes: 0

jayms
jayms

Reputation: 4018

Use parentNode to traverse the DOM:

var wrapper = document.getElementById('wrapper');    
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  var target = e.target;
  while(target.parentNode && target!==content) {target=target.parentNode;}

  if (target === content) {
    alert('clicked!');
  } 
});
<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Note: This only makes sense if there are other things to click on in #wrapper. Otherwise you can just attach a click event to #content without checking the target, since the event bubbles up anyway.

Upvotes: 2

emil.c
emil.c

Reputation: 2018

Try the following code based on my comment. You can just traverse up the tree and check for content element.

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {

  var element = e.target;

  while(element.parentNode) {
    
    if (element === content  ) {
      alert('clicked!');
      break;
    } 

    element = element.parentNode;

  }

});
<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

However, the best would be to just add an event listener to the content element without any condition like so:

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

content.addEventListener("click",function(e) {

  alert('clicked!');

});
<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Upvotes: 1

M. Kejji
M. Kejji

Reputation: 173

If you want every child of the #wrapper element to fire a function on click I would suggest doing it this way :

HTML :

<div id="wrapper" style="background-color:white">
    <div id="content" style="background-color:gray">
        <div>HELLO!</div>
        <div>WHUUUHUUU</div>
    </div>
</div>

JS :

var wrapper = document.getElementById('wrapper');
var contentNodes = wrapper.children;
for (var i = 0; i < contentNodes.length; i++)
{
    contentNodes[i].addEventListener('click', function(e) {
        alert('clicked !');
    });
}

this way, you can also determine which element was clicked through the variable this inside the function.

Upvotes: 0

rishabh dev
rishabh dev

Reputation: 1743

event.target is precisely the dom on which click has been done.In this case the span is the target.
If you are free to jquery, you can use closest method which selects the closest parent(including self) matching the selector: 

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

wrapper.addEventListener("click",function(e) {
  if ($(e.target).closest('#content')[0]) {
	alert('clicked!');
} 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div id="wrapper">
  <div id="content">
    <span>HELLO!</span>
  </div>
</div>

Upvotes: 0

Oron Bendavid
Oron Bendavid

Reputation: 1533

Try this solution:

HTML:

<div id="wrapper" style="background-color:white">
  <div id="content" style="background-color:gray">
    <div>HELLO!</div>
    <div>WHUUUHUUU</div>
  </div>

  <div id="dontTrigger">
    <span>DONT!</span>
  </div>
</div>

JS:

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');

content.addEventListener("click",function(e) {
    alert('clicked!');
});

Upvotes: 0

Related Questions