JS addeventlistener click to parent not child [duplicate]

Question

This question already has answers here:

Prevent execution of parent event handler (3 answers)

Closed 9 years ago.

I have parent and child parent is box which expands/colaps and child butons witch also on click handles other processess how to make parent not active on click when child is cliked?

this is parent:

$('#'+groupId)[0].addEventListener("click", collapseExpand);


<div id="title_group0">smth (1)<img id="coltitle_group0" src="chrome-extension://.../images/collapse.png" collapsed="yes" title="Show Divvies in this box" class="boxButton"><img src="chrome-extension://.../images/wrench_icon&amp;16.png" id="boxSettingsButton0" title="Settings" class="boxButton"><img style="display:none;" src="chrome-extension://.../images/sort_a.png" id="sorting_desc_asctitle_group0" class="sortIcon"><b style="display:none;" class="sortType">ABC</b></div>

Answer 1

You stop propagation (cancel bubbling) of the click:

$('#'+groupId)[0].addEventListener("click", function(e) {
    e.stopPropagation();
    collapseExpand(e); // You can omit the `e` if the function doesn't need it
});

By doing this within the child's event handler, you prevent the parent element from seeing the click.

---

Side note: You appear to be half-using jQuery. To fully use it:

$('#'+groupId).on("click", function(e) {
    e.stopPropagation();
    collapseExpand(e); // You can omit the `e` if the function doesn't need it
});

Answer 2

I think you can try to use event.stopPropagation() like that :

$('#'+groupId).click(function(event){
    collapseExpand()
    event.stopPropagation()
});

That will stop propagation of the event.

Answer 3

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

    alert( 'clicked the foobar' );
});

Try this-

http://jsfiddle.net/eaVzx/165/