JS addeventlistener click to parent not child

Question

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>

prevent the propagation of the click event from the child nodes — Arun P Johny, May 06 '14 at 12:09
`e.stopPropagation()` within the event listener of the child? — PhistucK, May 06 '14 at 12:09
He is asking if we can prevent propagate DOWN the chain, from the parent to the child. The question does not already have an answer. — ericjam, Feb 20 '15 at 22:50

score 0 · Accepted Answer · answered May 06 '14 at 12:11

0

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
});

answered May 06 '14 at 12:11

T.J. Crowder

1,031,962
187
1,923
1,875

I think the OP is asking to stop propagation to a CHILD of a parent. Is this even possible? I am trying to do so in the example of a Modal window in which I want the user to be able to click outside the content of the modal. ie:
click outside
STUFF
click outside
– ericjam Feb 20 '15 at 22:48

score 0 · Answer 2 · answered May 06 '14 at 12:11

0

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.

answered May 06 '14 at 12:11

Lucas Willems

6,673
4
28
45

score 0 · Answer 3 · answered May 06 '14 at 12:14

0

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

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

Try this-

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

answered May 06 '14 at 12:14

monu

370
1
10

JS addeventlistener click to parent not child

3 Answers3