How to prevent click of parent div when child is clicked

Question

I have a div with an <a href> inside it. When the div is clicked I want to show a popup but when the anchor is clicked, I want to show a different modal.

 <div data-toggle="modal" data-target="#firstmodal">
  <div>
   other stuff
  </div>
  <a href="" class="anch" data-toggle="modal" data-target="#other">
  <i class="fa fa-pencil"></i>
  </a>
</div>

I tried to give position:absolute; z-index:100 to the anchor tag, but it did not work. Clicking on it still opens BOTH the modals

.anch{
  position:absolute:
  z-index:100;
}

How do I prevent a parent's onclick event from firing when a child anchor is clicked?: https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli — ABC, Feb 27 '19 at 05:49
Possible duplicate of [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — Steven B., Feb 27 '19 at 05:50

score 0 · Answer 1 · answered Feb 27 '19 at 05:58

0

The term you're looking for is the “propagation” of the event, up the element hierarchy.

You may want Event.preventDefault, or one of the other methods to deal with event propagation.

answered Feb 27 '19 at 05:58

bignose

30,281
14
77
110

score 0 · Accepted Answer · answered Feb 27 '19 at 06:05

You can use Event.stopPropagation() in the link click event handler function to prevent further propagation of the current event in the capturing and bubbling phases:

document.querySelector('[data-toggle=modal]').addEventListener('click', function(e){
  alert('You have clicked div');
});

document.querySelector('a').addEventListener('click', function(e){
  e.stopPropagation();
  alert('You have clicked link');
});

<div data-toggle="modal" data-target="#firstmodal">
  <div>
   other stuff
  </div>
  <a href="" class="anch" data-toggle="modal" data-target="#other">
  <i class="fa fa-pencil"></i>Test link
  </a>
</div>

How to prevent click of parent div when child is clicked

2 Answers2