How to Prevent a Parent'S Onclick Event from Firing When a Child Anchor Is Clicked

How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.

There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

How to stop firing parent click event when child event clicked

You can pass & use the event object and use stopPropagation

function methods(e) {
  console.log(' Parent function')
}

function method2(e) {
  console.log(' Child function');
  event.stopPropagation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick='methods()'>
  <div></div>
  <div>
    <button onclick='method2(event)'>Button</button>
  </div>
</div>

How to prevent click of parent div when child is clicked

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 can I prevent click event from parent DOM?

function parent() {

    console.log("I'm your father");

}

function child() {

    console.log("You're not my father");

    window.event.cancelBubble = "true";

}

<div onclick="parent()" style="height : 40px;width:40px; background:blue">

    <div onclick="child()" style="height : 10px;width:10px; background:red"></div>

</div>

How do I prevent the onClick of the parent going off when clicking the child?

Use event.stopPropagation() or event.stopImmediatePropagation() these stop event bubbling and end bubble of events where it is called.

React how to prevent a parent's onclick event from firing when a child is clicked?

Well the obvious answer would be to put it outside of the div.

But if you really can't, you can always use CSS for this.

Try using pointer-events

Example:

HTML -

<div
  className={classes.container}
  onClick={() => navigate(`${props.productName}`)}
>
  <img src={props.image} alt="" />
  <svg className='no-events'></svg>
</div>

CSS -

.no-events {
   pointer-events: none;
}

Need help to prevent parent onclick event when click on child div

In your childClick function use event.stopPropagation(). Like this:

function childClick(event) {
    event.stopPropagation();
    // Other stuff
}

event.stopPropagation() prevents the event from continuing to bubble up the DOM.
Because you're just calling this in the childClick handler the event from the subChild will still propagate up to the childClick handler.

Stop parent event firing on child element click

Without jQuery you can use event delegation and determine to act using Element.closest()

document.addEventListener(`click`, handle);

function handle(evt) {
  console.clear();
  
  if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) {
      console.log(`You clicked (something within) the first li of ul#testUl`);
  }
}

<ul id="testUl">
  <li>
    <a href="#">Test A</a>
    <div class="innerUl">
      <ul>
        <li>Inner A</li>
        <li>Inner B</li>
        <li>Inner C</li>
      </ul>
    </div>
  </li>
</ul>

Prevent parent click when click on child

You need to prevent default action (which is focusing on input) by calling ev.preventDefault

$(function() {

  $('#child').click(e => {

    e.preventDefault()

    

    console.log('click on child')

  })

  

  $('#parent').click(() => {

    console.log('click on parent')

  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="parent">

  <span id="child">Click Me</span>

</label>

<input type="text" id="parent">

How to block click event on child element using parent element

For vanilla JavaScript, there's also a way to prevent the child events from triggering even they're assigned beforehand.

You may add a click event to the parent, set useCapture by assigning the third parameter to true in the addEventListener function and then e.stopPropagation in the function body.

This will make sure this event triggers before normal event phases, so all its child click events will not trigger. It also keeps the buttons clickable and will not alter their appearance.

document.querySelector('#parent').addEventListener('click', e => e.stopPropagation(), true);

<div id="parent">
  <div>
     <button onclick="console.log('a')">a</button>
  </div>
  <button onclick="console.log('b')">b</button>
  <button onclick="console.log('c')">c</button>
</div>

---

Related Topics