How to Only Trigger Parent Click Event When a Child Is Clicked

trigger parent click event when child is clicked

You dont need to trigger element click events when child elements are clicked, the click event bubbles up the dom tree if you dont stop propagation.

Here you can see it working: jsfiddle just click on the blue span, the click event will bubble up to the ul :)

Updated question

If you want the id of the ul, simply to:

$('ul li a').click(function() {
var id = $(this).closest('ul').attr('id');

Which would be even easier like so:

$('ul').click(function() {
var id = $(this).attr('id');

Working fiddle

This should work if you click on an since it bubbles up

trigger event only on parent click not child

Use event.stopPropagation to stop event bubbling:

function something() {  console.log("something");}document.getElementById('parent').addEventListener('click', something);document.getElementById('child').addEventListener('click', e => e.stopPropagation());
<div id="parent">  Parent info goes here!  <div id="child">Child info goes here!</div></div>

Trigger a child click event when clicking on parent

You do not need .each() at all here.

You can try the following way:

$('.parent').on('click', function(e){

$('body').on('click', '.child', doSomething);

function doSomething(e){
console.log('Child of ' +$( +' parent tiggered');
<script src=""></script>
<div class="parent">
<a href="#" class="child"></a>
<span>other elements</span>
<div class="parent">
<a href="#" class="child"></a>
<span>other elements</span>

Clicking on child does not trigger parent click

Use parentNode to traverse the DOM:

var wrapper = document.getElementById('wrapper');    var content = document.getElementById('content');
wrapper.addEventListener("click",function(e) { var 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>

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 =;
// Check if sender is the <div> element e.g.
// if($("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

React - Prevent Event Trigger on Parent From Child

You can use stopPropagation

stopPropagation - Prevents further propagation of the current event in
the bubbling phase

var App = React.createClass({  handleParentClick: function (e) {     console.log('parent');  },
handleChildClick: function (e) { e.stopPropagation(); console.log('child'); },
render: function() { return <div> <p onClick={this.handleParentClick}> <span onClick={this.handleChildClick}>Click</span> </p> </div>; }});
ReactDOM.render(<App />, document.getElementById('root'));
<script src=""></script><script src=""></script><div id="root"></div>

OnClick on child div should not trigger parent div's onClick method for a particular child

you should use event.stopPropagation()

<div className="second" onClick={(event) =>
console.log("second div")

Child element click event trigger the parent click event

You need to use event.stopPropagation()

Live Demo



Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.

How to only trigger parent ng-click event for target child element

Make the showSubCat boolean a property of the state iteration object:

  toggleSub(state) {
//this.$scope.showSubCat = !this.$scope.showSubCat
state.showSubCat = ! state.showSubCat;

<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
<td md-cell><a ng-click="$ctrl.toggleSub(state)">{{}}</a></td>
<td md-cell>-</td>
<td md-cell>{{state.totalCount}}</td>
<tr md-row ng-repeat-end
ng-repeat="subcat in | orderBy: 'subcategory'"
<!-- AFTER -->
<tr md-row ng-repeat-end
ng-repeat="subcat in | orderBy: 'subcategory'"
<!-- -->
<td md-cell></td>
<td md-cell>{{subcat.subcategory}}</td>
<td md-cell>{{subcat.count}}</td>
<td md-cell>{{subcat.percentage}}</td>

By making the showSubCat boolean part of the state iteration object, it will be different for each item in the parent ng-repeat.

Related Topics

Leave a reply