Make higher z-index elements disable lower elements' onclick

H

5

7

I've got a 'layer' that I want to give an onclick. The trick is that I want elements on above layers to not execute that action when clicked.

How can I make this happen?

Hohenlinden answered 19/3, 2011 at 18:52 Comment(0)

M

6

Invoke event.stopPropagation() to prevent "bubbling". Or, as mentioned above, change parental relationship for absolute positioned element.

Marlenamarlene answered 19/3, 2011 at 19:22 Comment(0)

D

8

The problem you are having is caused by the way events are propagated up through the DOM tree. When you click an element on the page, that element's click handler will be given a chance to respond to the click. Unless the handler stops the event propagation, the elements parent will be given a chance to handle the event, and so on until the root element is reached.

This behavior normally feels natural and every element "behind" the clicked element will get a chance to respond to the event. However, when you are using absolute positioning, you can place an element in front of another element which isn't its ancestor in the dom tree. At this point the event propagation can be confusing. Only the clicked elements ancestors receive the click event, meaning that the elements behind it may not.

I created a jsfiddle - http://jsfiddle.net/HUGNd/ - to illustrate this situation.

One quick way to fix it would be to make sure the element you want to respond to the click event is an ancestor of the element that gets clicked. Otherwise you can probably achieve the desired results in javascript regardless of which element's event handler is called.

Dicrotic answered 19/3, 2011 at 19:11 Comment(0)

M

6

Invoke event.stopPropagation() to prevent "bubbling". Or, as mentioned above, change parental relationship for absolute positioned element.

Marlenamarlene answered 19/3, 2011 at 19:22 Comment(0)

O

1

I'm a bit confused, I think this would happen naturally via the browser. From what I gather you're attempting to do something like this:

<html>
  <body>
    <div id="block" style="position:absolute; top:0; left:0; width:200px; height:200px; background-color:red;" onclick="alert('clicked');"></div>
    <div id="block" style="position:absolute; top:0; left:0; width:100px; height:100px; background-color:blue;"></div>
  </body>
</html>

[Not really an answer, but given that I wanted to post code I didn't feel a comment was appropriate]

Oribella answered 19/3, 2011 at 19:7 Comment(0)

C

1

You can use following CSS property to cancle all pointer events on that element :

.element {
    pointer-events: none;
}

This property will disable all events on that elements like Hover, Click, FOcus, etc

Cyndie answered 28/6, 2023 at 4:20 Comment(0)

M

0

You can reduce the event trigger to the target you want.

        targetDiv.onclick = (e) => {
            if ((e.target) == targetDiv) {
              alert('correct target');
            }
        }

Marquesan answered 23/3, 2018 at 11:53 Comment(0)

Recommended topics

Hot tags