differentiate the clicks between parent and child using javascript/jquery

Question

I have 2 elements nested called blanket and blanket-content and I want to recognize the clicks done to the parent alone.

<div id="blanket">
    <div id="blanket-content"></div>
</div>

The issue that I'm having is that when I'm clicking the child it is triggering the parent on click. I've tried different methods yet I was unsuccessful. I have tried these to play around with my code;

$('#blanket').on('click', function(ev) {
    alert(ev.currentTarget.id); //
});

^ This triggers the click on div as normal and state the parent id even when the child is clicked.

$('#blanket-content').on('click', function(ev) {
        alert(ev.currentTarget.id);
});

^ This doesn't trigger anything

What I want to achieve is when I click on blanket-content nothing will happen, but when I click on blanket I want to do something.

possible duplicate of Jquery: click event in parent and children — Manoj Dhiman
– Manoj Dhiman, Commented Aug 25, 2015 at 5:19
Can you post code in jsfiddle. because its working in jsfidle as jsfiddle.net/92jwad1w — Umesh Sehta
– Umesh Sehta, Commented Aug 25, 2015 at 5:28
@UmeshSehta use aruh link: jsfiddle.net/arunpjohny/3gLe7gfz/2 — Joseph118
– Joseph118, Commented Aug 25, 2015 at 5:36
@Joseph118 , the code working fine in link: jsfiddle.net/arunpjohny/3gLe7gfz/2 — Umesh Sehta
– Umesh Sehta, Commented Aug 25, 2015 at 5:39

Arun P Johny · Accepted Answer · 2015-08-25 05:15:18Z

3

One easy solution is to stop the event propagation in a click handler of the blanket-content, so that it will trigger the parent element's click handler.

You can use Event.stopPropagation() to do that

$('#blanket').on('click', function(ev) {
  alert(ev.currentTarget.id); //
});


$('#blanket-content').on('click', function(ev) {
  ev.stopPropagation()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>

Another solution(why) is to check whether the click happened in the blanket-content element inside the blanket click handler

$('#blanket').on('click', function(ev) {
  if (!$(ev.target).closest('#blanket-content').length) {
    alert(ev.currentTarget.id); //
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>

answered Aug 25, 2015 at 5:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Joseph118 Over a year ago

I had no luck with stopPropagation() so far and no the click is not triggering in #blanket-content

Arun P Johny Over a year ago

whether #blanket-content is created dynamically?

Umesh Sehta Over a year ago

@Joseph118 , Which jquery version are you using ?

Arun P Johny Over a year ago

@Joseph118 can you try to recreate the issue - jsfiddle.net/arunpjohny/3gLe7gfz/1

Joseph118 Over a year ago

This is the code I'm looking for however I don't know why the child div is not being triggered.. @UmeshSehta I'm using the latest version of jQuery, downloaded it last week edit- v214

|

Umesh Sehta · Accepted Answer · 2015-08-25 05:26:48Z

3

No need to do more. Just add ev.stopPropagation(); inside #blanket-content click event.

<div id="blanket">PARENT
    <div id="blanket-content">CHILD</div>
</div>


$('#blanket').on('click', function(ev) {
    alert(ev.currentTarget.id); //
});


$('#blanket-content').on('click', function(ev) {
    ev.stopPropagation();
    alert(ev.currentTarget.id);
});

Check here: https://jsfiddle.net/92jwad1w/

answered Aug 25, 2015 at 5:26

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

Comments

Ronnie · Accepted Answer · 2015-08-25 05:34:41Z

0

Try preventing the Default action, stop propogation doesn't always work if it is still being referenced.

$('#blanket').on('click', function(event){
    $(event).preventDefault();
});

this will stop the default action of a click event and will work well.

for more information, go here

answered Aug 25, 2015 at 5:34

Ronnie

2392 silver badges9 bronze badges

Collectives™ on Stack Overflow

differentiate the clicks between parent and child using javascript/jquery

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related