I wonder how can I stop child onclick event while still triggering the parent onclick event. For example the following structure:

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
</div>

if I click "child1" for example, the onclick event for "child1" will not be triggered, however, the onclick event for "parent" will still be triggered.

Thank you very much!

I wonder how can I stop child onclick event while still triggering the parent onclick event. For example the following structure:

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
</div>

if I click "child1" for example, the onclick event for "child1" will not be triggered, however, the onclick event for "parent" will still be triggered.

Thank you very much!

• javascript
• jquery

• You mean every time it's clicked, or some special scenario? – keyser Commented Sep 5, 2012 at 9:29
• 2 why are you creating the children onclick events if you don't want them? – Zoltan Toth Commented Sep 5, 2012 at 9:31
• I actually want them but there exist some kind of situation in which I want to temporarily disable them. – NoOne Commented Sep 5, 2012 at 9:40
• Maybe you can be more specific about this... it can be as simple as setting a flag and let the child event handlers test that flag. – Felix Kling Commented Sep 5, 2012 at 9:41

4 Answers 4

You could just pass the click to the parent?

$('.child1').click(function(e){
    e.preventDefault();
    $(this).parent('#parent').trigger('click');
});

When you click .child1, it will prevent the default action, and then trigger the click for the parent of child1 with an id of #parent.

Actually - probably ignore the above - as per the ment below it may cause bubbling. All you really need to do is use e.stopPropagation();.

I've created a jsfiddle showing how although the child1 has a click function bound to it, it's being ignored, and so the parent click is only getting picked up.

The simplest way to do this is unbind the child's event handler.

$('#child1').unbind('click');

Here is a solution bin for above issue. please check demo link once.

Demo: http://codebins./bin/4ldqp7l

HTML

<div id="parent">
  <div id="child1">
    Child-1
  </div>
  <div id="child2">
    Child-2
  </div>
  <div id="child3">
    Child-3
  </div>
</div>

jQuery

$(function() {
    $("#parent").click(function() {
        alert("Parent has been clicked too...!");
    });
    $("#child1").click(function(e) {
        e.stopPropagation();
        alert("Child-1 has been clicked...!");
    });
    $("#child2").click(function() {
        alert("Child-2 has been clicked...!");
    });
    $("#child3").click(function() {
        alert("Child-3 has been clicked...!");
    });
});

CSS

#parent{
  padding:5px;
  background:#a34477;
  width:140px;
  text-align:center;
  padding:10px;
}

#parent div{
  border:1px solid #2211a4;
  background:#a3a5dc;
  width:100px;
  text-align:center;
  font-size:14px;
  margin-left:10px;
  margin-top:3px;
}

Demo: http://codebins./bin/4ldqp7l

do you mean:

$('#parent').on('click', function(e) { 
   if( e.target !== this ) {
       return;
   }
});