Geek Answers Handbook

Handling click events at z-index'd levels

I have 2 z-index layers in the map application that I create. I have a problem when I click on layers to enlarge. The click handler is on the bottom z-index layer, and I don’t want it to work when the control is clicked in the overlying layer.

The problem is that the event is raised regardless of what, but the originalTarget property of the event is not an image in the lower layer when something on the upper layer is clicked. Is there any way to change this?

+6
javascript event-handling z-index
source share
4 answers

It is called event-bubbling, and you can control it using the event.stopPropagation() method ( event.cancelBubble() in IE). You can also control it by returning true / false from handlers called on any attributes on the elements. This is a difficult question, so I suggest you do the research .

Info: cancelBubble , stopPropagation

+4
source share

Although this does not address the problem directly, it can be a viable solution until a more suitable solution appears.

Write one function that will be called onClick, and let the function be smart enough to know who named it. The function then performs the appropriate actions based on who pressed it. You can send it almost everything that would be unique, and then use the 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>
+1
source share

I think it’s best to separate the event handler when the control moves to the upper level and when the control returns to the lower level, you can re-bind the events.

0
source share

priority for an item that has a large z-index

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

0
source share

More articles:


All Articles