CODEWITHSUNDEEP
javascripthtmljquerycss
ashes999
ashes999

Reputation: 1324

Disabling a click event from the child of a parent 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.net/arq1epbs/

$(document).on('click', '.parent', function() {
  var url = $(this).attr("data-url")
  document.location.href = url
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
  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!

Upvotes: 4

Views: 2454

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22431

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.com">
  Im the parent
  <div class="child">
    Im the child and I don't want to go to Google
  </div>
</div>

Upvotes: 0

loumadev
loumadev

Reputation: 369

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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
Im the parent
  <div class="child">
  im the child and I don't want to go to Google
  </div>
</div>

Upvotes: 1

palaѕн
palaѕн

Reputation: 73976

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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
  Im the parent
  <div class="child">
    im the child and I don't want to go to Google
  </div>
</div>

Upvotes: 1

matthias_h
matthias_h

Reputation: 11416

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()

Upvotes: 5

Related Questions