How can I prevent click event from parent DOM?

Question

say, I have

HTML:
<div onclick="parent()">
    <div onclick="child()"></div>
</div>

SCRIPT: {
function parent() {
    console.log("I'm your father");
}

function child() {
    console.log("You're not my father");
}

In this situation, if I click child element, it's parent element is clicked also, so parent() child() both are called. How can I call child() only without it's parent being clicked?

`Event.stopPropagation()` (also, better to assign handlers in Javascript rather than HTML attributes - that's as bad as `eval`) — CertainPerformance, May 08 '18 at 07:04
@CertainPerformance Do you mean I cannot use onclick, ng-click... for binding function do DOM? Should I use bunch of JQueries? — kispi, May 08 '18 at 07:19
it could be right for performance-wise but, isn't that easy to maintain rather than bunch of jquery selectors? — kispi, May 08 '18 at 07:21
@kispi No where did you mention `ng-click` in your question, but inline `onclick` is bad. — Asons, May 08 '18 at 07:22
@kispi `ng-click` is different from the `onclick` attribute. The problem isn't performance - the problem is code readability and maintainability. Inline event handlers are essentially `eval` inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Attach the handlers with Javascript instead. (no, there's absolutely no need for jQuery just to assign a handler) Separate presentation from content: keep content in your HTML and your Javascript in your Javascript. — CertainPerformance, May 08 '18 at 07:23
@CertainPerformance thanks, but how about ng-click? Can we think it seperates presentation and content? Or is it not a problem since it's 'ng' and everyone knows that there will be everything inside of component? — kispi, May 08 '18 at 07:29

score 3 · Accepted Answer · answered May 08 '18 at 07:08

3

function parent() {
    console.log("I'm your father");
}

function child() {
    console.log("You're not my father");
    window.event.cancelBubble = "true";
}

<div onclick="parent()" style="height : 40px;width:40px; background:blue">
    <div onclick="child()" style="height : 10px;width:10px; background:red"></div>
</div>

You can use

window.event.cancelBubble = "true"

answered May 08 '18 at 07:08

Atul Sharma

9,397
10
38
65

Thanks for the extra information. didn't know about cancleBubble – kispi May 08 '18 at 07:10
2

@kispi The `Event.cancelBubble` property is a historical alias to `Event.stopPropagation()`, use the latter. – Asons May 08 '18 at 07:16

score 1 · Answer 2 · answered May 08 '18 at 07:05

1

Add the following in your child click event to stop event bubbling.

 event.stopPropagation();

answered May 08 '18 at 07:05

Mohit Agarwal

201
2
10

Mamun · Answer 3 · 2018-05-08T07:11:35.177

1

Try event.stopPropagation() from child() which will prevent further propagation of the current event in the capturing and bubbling phases.

function parent() {
    console.log("I'm your father");
}

function child(e) {
    e.stopPropagation();
    console.log("You're not my father");
}

<div onclick="parent()">Parent
    <div onclick="child(event)">Child</div>
</div>

edited May 08 '18 at 07:11

answered May 08 '18 at 07:06

Mamun

66,969
9
47
59

Parent click doesn't seems to be working. – Atul Sharma May 08 '18 at 07:09

score 1 · Answer 4 · answered May 08 '18 at 07:07

That's called bubbling. The process is called “bubbling”, because events bubble from the inner element up through parents like a bubble in the water.

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

You can use stopPropagation method.

function parent() {
    console.log("I'm your father");
}

function child(event) {
    event.stopPropagation();
    console.log("You're not my father");
}

#parent{
  background-color:red;
  width:100px;
  height:100px;
}

#child {
  background-color:blue; 
  width:30px;
  align:center;
  height:30px;
}

<div id="parent" onclick="parent()">
    <div id="child" onclick="child(event)"></div>
</div>

for those bounty hunters, yeah – kispi May 08 '18 at 08:30 — kispi, May 08 '18 at 08:30

How can I prevent click event from parent DOM?

4 Answers4