Handling click events on z-index'd layers

Asked 22/6, 2009 at 8:23 Answered 6/7, 2022 at 9:20

Solved javascript event-handling z-index

I have 2 z-index layers in a map application I'm building. I have a problem when I click on the layers to zoom in. The click handler is on the underlying z-index layer and I don't want it to fire when a control in the overlying layer is clicked.

The problem i have is that the event gets raised no matter what but the originalTarget property of the event is not the image in the underlying layer when something on the top layer is clicked. Is there anyway to change this?

Prajna answered 22/6, 2009 at 8:23 Comment(0)

It's called event-bubbling, and you can control it with the event.stopPropagation() method (event.cancelBubble() in IE). You can also control it by returning true/false from handlers called by onwhatever attributes on elements. It's a tricky subject so I suggest you do some research.

Info: cancelBubble, stopPropagation

Space answered 22/6, 2009 at 8:34 Comment(4)

This isn't event bubbling. Event bubbling would be where I have a click event handler on both elements. I only have a click handler on the bottom layer. – Prajna 22/6, 2009 at 8:36

Then what do you mean by "The click handler is on the underlying zindexed layer and i don't want it to fire when a control in the overlying layer is clicked." Controls use bubbling as well. Perhaps you really want capturing but that isn't supported by IE – Space 22/6, 2009 at 8:40

I take my original comment back! It is indeed event bubbling, sorry. I took your suggestion on board and got it working :) – Prajna 24/6, 2009 at 1:26

Typo in stopProgation. – Blain 4/3, 2017 at 12:8

Although this does not address the problem directly it may be a viable workaround until a more fitting solution presents itself.

Write a single function to be called onClick and allow the function enough smarts to know who called it. The function then takes the appropriate action based upon who clicked it. You could send it pretty much anything that would be unique and then use a switch.

simplified example :

<html>
<body>

<script type="text/javascript">
function myClickHandle(anID)
{
switch(anID){
case 'bottom': 
      alert("I am on the bottom");
      break;
case 'top':
      alert("I am on the top");
      break;
}
}
</script>

<html>
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div>
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div>
</body>
</html>

Buckingham answered 22/6, 2009 at 9:25 Comment(2)

Is there anyway to do this unobtrusively? i.e. don't mix the javascript in with the html? – Prajna 23/6, 2009 at 11:20

Sorry after the summer ended I didnt make it back to stack overflow until tonight. The Script tag can go in your header or live in some external file its just for example sake. Onclicks have to be there to initiate the action. – Buckingham 9/10, 2009 at 4:11

or, one more workaround could be using CSS property pointer-events: none; on div's you don't want to click, and then on deeper nested components use pointer-events: all; on div's you want to be able to click.

This way you could propagate event to desired component (if there is a reason you cannot use other solution)

Loreenlorelei answered 6/7, 2022 at 9:20 Comment(0)

I think the best practice is to detach the event handler when the control moves to the upper layer and when the control gets back to the lower layer, you can reattach the events.

Universalism answered 23/6, 2009 at 19:27 Comment(0)

priority to the element who has the great z-index

http://api.jquery.com/event.stopPropagation/

Slosberg answered 7/4, 2010 at 11:28 Comment(0)

Recommended topics

Hot tags