div block is listening to both inner and outer events

Question

On clicking black (outer div) outer is printed (no issue with that) but on clicking brown (inner div) both inner and outer is printed and thats the issue. I want only inner to be printed on clicking in brown area and outer on black area.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body style="height:100px; width:100px;">
    <div style="width: 100%; height: 100%; background-color: black;" onclick="console.log('outer')">
        <div style="width: 50%; height: 50%; background-color: brown;" onclick="console.log('inner');"></div>
        </div>
    </body>
    </html>

[What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — Andreas, Aug 17 '21 at 12:50
This is happening because inner div is still a part of outer div and will trigger the outer onclick event. You need to handle this using JS — ahsan, Aug 17 '21 at 12:50
Does this answer your question? [What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — cloned, Aug 17 '21 at 12:54

score 0 · Answer 1 · answered Aug 17 '21 at 12:53

0

I think you should make use of the stopPropagation() method. In this way you can prevent event "bubbling" on child/parent elements.

More info about it can be found here: https://www.w3schools.com/jsref/event_stoppropagation.asp

answered Aug 17 '21 at 12:53

JW Geertsma

857
3
13
19

score 0 · Accepted Answer · answered Aug 17 '21 at 12:56

The cancelBubble property of the Event interface is a historical alias to Event.stopPropagation(). Setting its value to true before returning from an event handler prevents propagation of the event.

<body style="height:100px; width:100px;">
<div style="width: 100%; height: 100%; background-color: black;" onclick="console.log('outer')">
    <div style="width: 50%; height: 50%; background-color: brown;" onclick="console.log('inner');event.cancelBubble=true"></div>
    </div>
</body>

you can use event.cancelBubble=true to achieve what you want

here you can read more about cancelbubble

Upvoted, because this works, but the [global event property](https://developer.mozilla.org/en-US/docs/Web/API/Window/event) is deprecated, although still widely supported. A better answer might include that information, and demonstrate the correct way to set an event listener with [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). — I wrestled a bear once., Aug 17 '21 at 13:07

score 0 · Answer 3 · answered Aug 17 '21 at 12:59

With the markup currently how it is, whenever you click the inner div you are also clicking the outer div, therefore both events will trigger.

The only way (to my knowledge) of overcoming this with plain html / css / js would be wrapping inner and outer in a container div with display : grid and then setting the appropriate grid areas:

.container {
   display : grid;
   grid-template : "a a a"
                   "a b a"
                   "a a a";
}
.outer {
   grid-area : a;
}

.inner {
   grid-area : b;
}

This is a bit of a strange solution though, and using jQuery could really help you here, see this post for solving that way.

div block is listening to both inner and outer events

3 Answers3