I am trying to add a on click event to a div with a class parent. Now inside that div I have a div with class child that has its own click event.

How can I manage to disable the click event of the parent function for that child element in order to execute the function of child element itself?

I have tried using pointer-event:none; but it does not seem to be working. I have wrote a jsfiddle for better understanding.

/

$(document).on('click', '.parent', function() {
  var url = $(this).attr("data-url")
  document.location.href = url
});

<script src=".3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

I am trying to add a on click event to a div with a class parent. Now inside that div I have a div with class child that has its own click event.

How can I manage to disable the click event of the parent function for that child element in order to execute the function of child element itself?

I have tried using pointer-event:none; but it does not seem to be working. I have wrote a jsfiddle for better understanding.

https://jsfiddle/arq1epbs/

$(document).on('click', '.parent', function() {
  var url = $(this).attr("data-url")
  document.location.href = url
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

Thanks for all the help in advance!

• javascript
• html
• jquery
• css

• I have a div with class child that has its own click event. the example does not show how/when you register that click even to the child. – t.niese Commented May 2, 2020 at 17:57
• I like the idea of a licking event, I think that this confinement made us all very frustrated ;) – Mister Jojo Commented May 2, 2020 at 17:58

4 Answers 4

You can use stopPropagation():

 $(document).on('click', '.parent', function () {
    var url = $(this).attr("data-url")
    document.location.href = url 
});
 $(document).on('click', '.child', function (e) {
 e.stopPropagation();
});

As it's not working in the Stack Snippet, here a Fiddle For reference: stopPropagation()

You can simply call event.stopPropagation() inside child click event, to prevent the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the child click event like:

$(document).on('click', '.parent', function() {
  //var url = $(this).attr("data-url")
  //document.location.href = url
  console.log('Parent Clicked');
});

$(document).on('click', '.child', function(event) {
  event.stopPropagation();
  console.clear();
  console.log('Child Clicked');
});

.parent{background:#99c0c3;width:350px;height:120px;position:relative}
.child{background:#ffde99;width:300px;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

Just add this line:

$(document).on('click', '.parent', function (e) {
    if(e.target !== this) return false;   //This line added
    var url = $(this).attr("data-url")
    document.location.href = url 
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.">
Im the parent
  <div class="child">
  im the child and I don't want to go to Google
  </div>
</div>

You can do this in "pure" JS

document.querySelector('div.parent').onclick = evt =>
  {
  if (!evt.target.matches('div.parent')) return // reject sub elements click

  document.location.href = evt.target.dataset.url
  }

div.parent { cursor: pointer }
div.child { cursor: default }

<div class="parent" data-url="www.google.">
  Im the parent
  <div class="child">
    Im the child and I don't want to go to Google
  </div>
</div>