calling different functions from inside and outside of div

Question

I am having a div inside a div. And I want to call a function on the click of outer div and another function on the click of inner div. Is it possible to do so?

<div onclick="function1()">
<div onclick=function2()></div>
</div>

it's event bubbling concept. – Parth Akbari Apr 30 '18 at 09:41 — Parth Akbari, Apr 30 '18 at 09:41

nashcheez · Accepted Answer · 2018-04-30T10:04:27.697

5

Yes, this is very much possible. And the code you have will get the job done.

NOTE: You need to add event.stopPropagation() in case you want to prevent the bubbling of the event from the inner function.

Try this out:

function function1() {
  console.log("From outer div");
}

function function2(event) {
  console.log("From inner div");
  event.stopPropagation();
}

#outer-div {
  width: 100px;
  height: 100px;
  background: yellow;
}

#inner-div {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  top: 25px;
  left: 25px;
}

<div id="outer-div" onclick="function1()">
  <div id="inner-div" onclick="function2(event)"></div>
</div>

edited Apr 30 '18 at 10:04

answered Apr 30 '18 at 09:41

nashcheez

5,067
1
27
53

inner div calls both the function. which is not needed – Satish Gupta Apr 30 '18 at 09:47
@SatishGupta Added `event.stopPropagation()` to prevent bubbling of the event from the inner function. Thanks – nashcheez Apr 30 '18 at 09:48
@dfsq It is very easy to mock someone's answer, but it would rather be more useful if you could actually point out why something wouldn't work. P.S. if you thought it was `event` that was not being passed, then I have updated the answer. I understand that Firefox doesn't pick out the event variable by itself, so it needs to be explicitly passed. However, it does work in the Webkit browsers. Anyway, that was not the point of the OP. – nashcheez Apr 30 '18 at 10:06
Well it was bad answer anyway, why not mock it, huh? Now it's better, so cheers! – dfsq Apr 30 '18 at 10:17
@dfsq I think the whole purpose of SO is learning something new, so I would refrain from mocking something without providing an insight as to why it wouldn't work. Anyway, cheers! – nashcheez Apr 30 '18 at 10:20

score 2 · Answer 2 · answered Apr 30 '18 at 09:40

Yes, it is; one way to do it is the way you've done it in your question, except:

You need quotes around the inner onclick attribute value, just as you have around the outer onclick attribute value.
You probably want to pass event into at least the inner one:
```
<div onclick="function2(event)"></div>
```
and then have it call stopPropagation on that:
```
function function2(event) {
    event.stopPropagation();
}
```
so that the click event isn't propagated to the parent (doesn't bubble any further). If the click bubbles, function1 will be called as well.

Example:

function function1() {
  console.log("function1 called");
}
function function2(event) {
  event.stopPropagation();
  console.log("function2 called");
}

<div onclick="function1()">
<div onclick="function2(event)">this div fires function2</div>
clicking here will fire function1
</div>

You might also consider modern event handling rather than onxyz-attribute-style event handlers; search for examples of addEventListener for details; my answer here also has a useful workaround for obsolete browsers.

calling different functions from inside and outside of div

2 Answers2