asked on Z-index event passing
I got a little problem. In mine aplication I would like to have something like that:
<div style="z-index:2;position:
<div style="position:absolute;w
(the text will be one on another - that is intended - in mine application there are text over images).
The problem lying in onclick event (and all other events) - using z-index makes all field 100x100 to be handled via first div event handler, but i would like that this div would be transparent for event handler (putting a function to pass event on this second div is not good because i have many divs under the first div). Is there any method that you know to make this first DIV transparent for events?? Thanks for any advices :)
<div style="z-index:2;position:
<div style="position:absolute;w
(the text will be one on another - that is intended - in mine application there are text over images).
The problem lying in onclick event (and all other events) - using z-index makes all field 100x100 to be handled via first div event handler, but i would like that this div would be transparent for event handler (putting a function to pass event on this second div is not good because i have many divs under the first div). Is there any method that you know to make this first DIV transparent for events?? Thanks for any advices :)
Web Languages and StandardsHTMLJavaScript
Last Comment
JohnSixkiller
ASKER
Yes, that is true for a parent-child hierarhy, but as you see in mine example the elements are not in parent-child hierarhy.
ASKER
And in case of parent-child is an easy problem, because default behaviour is to pass event to parent. But again - this is not parent-child problem:/
I am afraid there is no function that can do that.
So if you dont want to call function of underlying DIV, you will have to loop:
function divOnClick(Sender){
var = Sender.nextSibling;
while(o != null && o.id != 'targetDIV') o = o.nextSibling;
...
}
or cycle trough parent.children[] ....
So if you dont want to call function of underlying DIV, you will have to loop:
function divOnClick(Sender){
var = Sender.nextSibling;
while(o != null && o.id != 'targetDIV') o = o.nextSibling;
...
}
or cycle trough parent.children[] ....
ASKER
The problem is that there is many divs under mine and they have dynamical position so in fact its hard to tell to which one I have to pass element. I got an idea to read mouse posittion, then check all elements on page (omg) if any of them are in range then pass an event to them but this method can be really slow (and mine application need any ms on running in javascript, because its kind of javascrip game;>)
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That is exacly mine idea but I though it can be done in any easier way... ok never mind then - at least thanks for trying ;)
ASKER
I giving you A for courage to talk about this unusual problem, even if its still not solved. At least I more sure that this is not possible via one simple method ;)
You are welcome and thanks for A grade.
Good luck!
JS
Good luck!
JS
events are bubbling from the most inner element UP to outer elements. You can use on any level:
<div onclick="doAction(event)">
function doAction(ev){
.. your code ...
ev.cancelBubble = true; // This disables event triggering on parent elements
}