Handling Click Events On Z-index'd Layers
Solution 1:
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
Solution 2:
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><scripttype="text/javascript">functionmyClickHandle(anID)
{
switch(anID){
case'bottom':
alert("I am on the bottom");
break;
case'top':
alert("I am on the top");
break;
}
}
</script><html><divstyle="z-index:10"><inputtype=buttonvalue='top'onclick="myClickHandle(this.value)"/></div><divstyle="z-index:11"><inputtype=buttonvalue='bottom'onclick="myClickHandle(this.value)"/></div></body></html>Solution 3:
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.
Solution 4:
priority to the element who has the great z-index
Post a Comment for "Handling Click Events On Z-index'd Layers"