Prevent Events in Javascript

Question

I have two div, Outer Div and Inner Div, both the div attached with click event. whenever i click inner div it alert outer div also, i want to prevent the event handler of Outer div when i click the Inner Div in Javascript

Here is my Javascript

function funOne()
{
   //event.stopPropagation();
   alert('Outer Div')
}

function funTwo()
{
  //event.stopPropagation();
  alert('Inner Div')
}

Here is the DEMO

event.stopPropagation() is this not working for you ? – Akhil Thayyil Apr 14 '15 at 12:15 — Akhil Thayyil, Apr 14 '15 at 12:15
Check here. http://jsfiddle.net/7r4hhzo0/2/ – ketan Apr 14 '15 at 12:20 — ketan, Apr 14 '15 at 12:20
It works for me. Both IE and Chrome. – wonderbell Apr 14 '15 at 12:21 — wonderbell, Apr 14 '15 at 12:21

woz · Answer 1 · 2015-04-14T12:24:03.507

2

Using stopPropagation should work to stop propagation from the child div to the parent div, but you functions are lacking an event object.

function funOne(e)
{
    e.stopPropagation();
    alert('Outer Div')
}

function funTwo(e)
{
    e.stopPropagation();
    alert('Inner Div')
}

You also need to pass the event when you call the function:

<div class="first" onclick="funOne(event)">
    <div class="second" onclick="funTwo(event)"></div>
</div>

Note that stopPropagation only works for child/parent situations. If the one div merely appears to be inside another div, stopPropagation does nothing.

edited Apr 14 '15 at 12:24

answered Apr 14 '15 at 12:16

woz

10,888
3
34
64

1

`e` is going to be `undefined`. – dfsq Apr 14 '15 at 12:17
@dfsq Why do you think so? – Sebastian Simon Apr 14 '15 at 12:18
@Xufox OP provided a demo, it's very easy to test. – dfsq Apr 14 '15 at 12:19
@Xufox Because, according to the jsfiddle in the question, the functions are called without parameters. – JJJ Apr 14 '15 at 12:19
@Juhana Event handlers always have the event object as the first argument (if you do it with `addEventListener` anyway). – Sebastian Simon Apr 14 '15 at 12:20
@Xufox Yeah, but the OP isn't doing it with `addEventListener`. – JJJ Apr 14 '15 at 12:21
@Xufox Are you sure :) just open a fiddle and try it. note, that it's inline event handlers, not addEventListener. – dfsq Apr 14 '15 at 12:22
@woz: Can you please elaborate on `If the one div merely appears to be inside another div, stopPropagation does nothing.` – n4m31ess_c0d3r Apr 14 '15 at 12:26
@Navendu After checking the jsFiddle from the OP, I guess this isn't really relevant to his situation. I meant that the inner div has to be a child HTML element of the parent; you can't use CSS to position one div inside another and expect `stopPropagation` to work. – woz Apr 14 '15 at 12:27

ketan · Answer 2 · 2015-04-14T12:25:34.003

Check here you missed to defined event.

function funOne(e)
{
    e.stopPropagation();
    alert('Outer Div')
}

function funTwo(e)
{
    e.stopPropagation();
    alert('Inner Div')
}

.first{width:600px; height:600px; background:yellow}
.second{width:100px; height:100px; background:orange; position:relative; top:50%; left:50%; margin-left:-50px; margin-top:-50px}

<div class="first" onclick="funOne(event)">
 <div class="second" onclick="funTwo(event)"></div>
</div>

Check Fiddle.

score 1 · Accepted Answer · answered Apr 14 '15 at 12:24

1

Updated your fiddle check it out :

<div class="second" onclick="funTwo(event)"></div>

function funTwo(event)
{
event.stopPropagation();
alert('Inner Div')
}

https://jsfiddle.net/7r4hhzo0/4/

answered Apr 14 '15 at 12:24

Kushal

1,360
6
16

score 0 · Answer 4 · answered Apr 14 '15 at 12:27

<script>
  function funOne(e)
  {
     e.stopPropagation();
    alert('Outer Div')
  }

   function funTwo(e)
    {
      e.stopPropagation();
     alert('Inner Div')
  }
   </script>

You need to call these function like onclick="funOne(event);" and onclick="funTwo(event);"

Prevent Events in Javascript

4 Answers4