CODEWITHSUNDEEP
javascripthtml
Peter Eberle
Peter Eberle

Reputation: 1181

stopPropagation in Javascript

I want an overlay to fire the click event. But the click goes of on every childnode.

function something(e) {
  e.stopPropagation();
  console.log('its fired');
}
#overlay {
  width: 100%;
}
#image-wrapper {
  width: 50%;
}
<div id="overlay" onclick="something">
  <div id="image-wrapper">
    <img src="image.jpg" id="popupImage" alt="[image]">
  </div>
</div>

I don't want it fire click on the image. Only in the overlay.

Upvotes: 0

Views: 133

Answers (6)

Quentin
Quentin

Reputation: 943142

You need the event handler you have there on the image (or the image wrapper depending on the exact effect that you are looking for) so that the doesn't propagate to the overlay when the image is clicked.

Alternatively, check the target property of the event object and return if it is something you don't want to handle the event on.

Upvotes: 0

Peter Eberle
Peter Eberle

Reputation: 1181

<div id="overlay" style="width: 100%;" onclick="something">
    <div id="image-wrapper" style="width: 50%;">
        <img src="image.jpg" id="popupImage">
    </div>
</div>



getElementById('overlay').onclick = function(e) {
    console.log('did something');
    callToSomehtingElse();
}

getElementById('image-wrapper').onclick = function(e){
    console.log('but here i prevented it'); 
    e.preventDefault();
    e.stopPropagation();
}

Thanks to everyone...

Upvotes: 0

Oriol
Oriol

Reputation: 287980

event.target is the element that triggered the event.

event.currentTarget is the EventTarget whose EventListeners are currently being processed.

Therefore, comparing those you can filter events triggered in your element itself, not in its descendants.

document.getElementById('overlay').addEventListener('click', function(e) {
  if(e.target != e.currentTarget) return;
  console.log('its fired');
});
#overlay {
  width: 100%;
  background: #aaf;
}
#image-wrapper {
  width: 50%;
  background: #afa;
}
<div id="overlay">
  <div id="image-wrapper">
    <img src="image.jpg" id="popupImage" alt="[image]">
  </div>
</div>

Additional notes:

  • Avoid inline event listeners in the html. Better add them using JS, e.g. with addEventListener.

  • Usually, you can use this instead of e.currentTarget.

Upvotes: 2

laruiss
laruiss

Reputation: 3816

Just make sure the click comes from the overlay and nothing else:

function something(e) {
  e = e || window.event;
  evar target = e.target || e.srcElement;
  if (target.id === 'overlay') {
    console.log('Overlay has been clicked');
  } else {
    console.log('Something else has been clicked');
  }
}

Upvotes: 0

jmore009
jmore009

Reputation: 12923

you can preventDefault() on the img

$("img").click(function(e){
 e.preventDefault();
 e.stopPropagation();
 console.log("stop click");    

});

FIDDLE

Upvotes: 0

Indranil Mondal
Indranil Mondal

Reputation: 2857

You can try this:-

 <div id="overlay" style="width: 100%;" onclick="something">
   <div id="image-wrapper" style="width: 50%;">
    <img src="image.jpg" id="popupImage" onclick="nothing">
  </div>
 </div>

function something (e) {


  console.log('its fired');
 }

function nothing (e) {
  e.stopPropagation();

 }

Upvotes: 1

Related Questions