Howto: div with onclick inside another div with onclick javascript

Question

just a quick question. I'm having a problem with divs with onclick javascript within each other. When I click on the inner div it should only fire it's onclick javascript, but the outer div's javascript is also being fired. How can the user click on the inner div without firing the outer div's javascript?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>

Duplicate. http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other — vpram86, Mar 05 '10 at 07:16

score 128 · Accepted Answer · answered Mar 05 '10 at 07:29

Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

score 28 · Answer 2 · answered Mar 05 '10 at 07:18

Check out the info on event propagation here

In particular you'll want some code like this in your event handlers to stop events from propagating:

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

score 8 · Answer 3 · answered Mar 05 '10 at 07:21

8

This is a case of event bubbling.

You can use

e.cancelBubble = true; //IE

and

e.stopPropagation(); //FF

answered Mar 05 '10 at 07:21

rahul

184,426
49
232
263

score 6 · Answer 4 · answered Apr 17 '14 at 15:47

6

Just add this code :

window.event.stopPropagation();

answered Apr 17 '14 at 15:47

user3438083

69
1
3

This didnt work for me. The top answer is more accurate. – Cynthia Sanchez Dec 18 '15 at 11:00

score 6 · Answer 5 · answered Mar 05 '10 at 07:17

6

return false; from the inner div's onclick function:

<div onclick="alert('inner'); return false;" ...

What you're dealing with is called event propagation.

answered Mar 05 '10 at 07:17

Tatu Ulmanen

123,288
34
187
185

The method you suggest doesn't actually work. (At least not in any of the browsers I just double checked it on-- Firefox 3.6, IE8.) Note that your link actually says to use a different method, which I gave in my answer. – Tim Goodman Mar 05 '10 at 07:37

score 5 · Answer 6 · answered Feb 23 '12 at 00:08

5

One more way for webkit based browsers:

<div onclick="alert('inner'); event.stopPropagation;" ...

answered Feb 23 '12 at 00:08

Juliano Moraes

169
2
3

3

this works but like this: onclick="alert('inner'); event.stopPropagation();" – Jaxx0rr Dec 10 '15 at 12:29
This worked for me and I tested it on Opera (46), Chrome (59.0.3071.115), FireFox Developer (55.0b9 (32-bit)), Internet Explorer 11 – Craig London Jul 19 '17 at 19:09

score 2 · Answer 7 · answered Apr 19 '18 at 06:33

This worked for me in Jquery:

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

This way, if the current target is not the same as the outer div, it will do nothing. You can implement normal functions on the child elements.

score 1 · Answer 8 · edited May 23 '17 at 11:54

1

This was very helpful, but it didn't work for me.

What i did is described here.

So I put a condition to the outer onclick event:

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}

edited May 23 '17 at 11:54

Community

1
1

answered Aug 03 '12 at 07:42

shooby

95
2
8

score 1 · Answer 9 · answered Mar 05 '10 at 07:33

1

Here is some more reference to help you in understanding javascript event bubbling.

answered Mar 05 '10 at 07:33

Ben

784
3
12
32

score 1 · Answer 10 · answered Apr 22 '15 at 12:04

1

You can use

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

answered Apr 22 '15 at 12:04

AngelQuesada

387
4
19

score 1 · Answer 11 · answered Jul 24 '10 at 16:27

1

you have two 'div' and three '/div'.

answered Jul 24 '10 at 16:27

freddie

11
1

Paul Jere · Answer 12 · 2022-10-07T02:08:59.127

1

 //Using window.event.stopPropagation(), the parent div wont be clicked when the child div is clicked
 //HTML    
 <div onclick="parent_func()">
  <div onclick="child_func()"></div>
 </div>

//JS
function parent_func(){
  window.event.stopPropagation();
  console.log('Parent')
}
function child_func(){
  window.event.stopPropagation();
  console.log('Child')
}

edited Oct 07 '22 at 02:08

answered Oct 07 '22 at 02:07

Paul Jere

11
4

score 0 · Answer 13 · answered Apr 17 '23 at 12:28

You have to stop propragation for example for angular framework you have to do that

import {Directive, HostListener} from "@angular/core";
    
@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

Then just add it to the element you want it on:

<div click-stop-propagation>Stop Propagation</div>

Howto: div with onclick inside another div with onclick javascript

13 Answers13

Linked

Related