Make parent div unclickable but children children clickable - CSS

Question

In a scenario like this one, I want to be able to click the background div (red) through the top div, whilst still being able to click the top div's children (blue and green).

 function bgclick() { console.log('Background Is Clicked!'); } function topclick() { console.log('Top Is Clicked!'); }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; } .children { width: 50px; height: 50px; position: relative; }

 <div id="background" onclick="bgclick()"></div> <div id="top"> <div class="children" onclick="topclick()" style="background-color:#3f3"></div> <div class="children" onclick="topclick()" style="background-color:#33f"></div> </div>

I have played around with pointer-events: none . This will only make one clickable and the other not. How can I make it so I can click the red one and get a message, along with the blue and green ones?

Answer 1

You have to change the markup by nesting the #top container into the #background container.

And then simply pass the event to the topclick method and add event.stopPropagation() to it to make sure just the div on the very top gets clicked.

See the modified code:

 function bgclick() { console.log('Background Is Clicked!') } function topclick(event) { event.stopPropagation(); console.log('Top Is Clicked!') }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; } .children { width: 50px; height: 50px; position: relative; }

 <div id="background" onclick="bgclick()"> <div id="top"> <div class="children" onclick="topclick(event)" style="background-color:#3f3"> </div> <div class="children" onclick="topclick(event)" style="background-color:#33f"> </div> </div> </div>

Answer 2

To make parent div unclickable but children clickable only use pointer-events.

pointer-events

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

More about how it works herepointer-events

.parent { 
    pointer-events: none;
}

.child {
    pointer-events: auto;
}

Answer 3

I've found a easy way to get around this problem (op).

pointer-events:none; makes it so the mouse won't interact with the element. By default, pointer-events is inherited, so just set the children as pointer-events:auto; .

 function bgclick() { console.log('Background Is Clicked!'); } function topclick() { console.log('Top Is Clicked!'); }

 #background { background-color: #f33; width: 250px; height: 250px; position: fixed; top: 0; left: 0; z-index: -1; } #top { width: 250px; height: 250px; position: fixed; top: 0; left: 0; pointer-events: none; } .children { width: 50px; height: 50px; position: relative; pointer-events: auto; }

 <div id="background" onclick="bgclick()"></div> <div id="top"> <div class="children" onclick="topclick()" style="background-color:#3f3"></div> <div class="children" onclick="topclick()" style="background-color:#33f"></div> </div>