Events in nested div's

11-18-2006

This question may be as much about css as javascript. Here is my code.

<html>
<head>
<script>
function setBackground(id) {
window.alert(id);
document.getElementById(id).style.backgroundColor= 'blue';
event.cancelBubble=true;
}
</script>
<body>
<div id='1div'style="padding:200px;background-color:red"
onClick="setBackground('1div');">
<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');"></div>
</div>
</body>
</html>

I wish to change the yellow color to blue by clicking on it which works
fine for the above code.

However, if the padding:200px style of 1div is replaced with
height:300px then, when I click the yellow area (2div), the event is
handled by 1div rather than 2div. Can anyone explain the difference and
how I can change only the yellow area of 2div with the second style.

11-18-2006

vfk799 wrote:

> This question may be as much about css as javascript. Here is my code.
>
> <html>
> <head>
> <script>
> function setBackground(id) {
> window.alert(id);
> document.getElementById(id).style.backgroundColor= 'blue';
> event.cancelBubble=true;
> }
> </script>
> <body>
> <div id='1div'style="padding:200px;background-color:red"
> onClick="setBackground('1div');">
> <div id='2div' style="padding:100px;background-color:yellow"
> onClick="setBackground('2div');"></div>
> </div>
> </body>
> </html>
>
> I wish to change the yellow color to blue by clicking on it which works
> fine for the above code.
>
> However, if the padding:200px style of 1div is replaced with
> height:300px then, when I click the yellow area (2div), the event is
> handled by 1div rather than 2div. Can anyone explain the difference and
> how I can change only the yellow area of 2div with the second style.

I think the problem is that you have a div element within a div
element. I was under the impression that divs were block elements, and
should be 'stacked', so to speak. If I needed to do what you are trying
to do, I would consider using tables.

I could be wrong in my above statement, but I am guessing that due to
the nature of divs, by clicking on the inside div element, you are
also, clicking on the outer div element.

11-18-2006

Maybe you shouldn't pass arguments to the function, but examine the
event object that comes with the event. Its srcElement/target property
tells you the immediate receiver of the click.

The air code for this is as follows:

function setBackground(e) {
if (!e) e = window.event;
var el = e.target ? e.target : e.srcElement;
el.style.backgroundColor = "blue";
}

where you don't have the need to cancelBubble, in the same run.
Daz schreef:
> vfk799 wrote:
>
>> This question may be as much about css as javascript. Here is my code.
>>
>> <html>
>> <head>
>> <script>
>> function setBackground(id) {
>> window.alert(id);
>> document.getElementById(id).style.backgroundColor= 'blue';
>> event.cancelBubble=true;
>> }
>> </script>
>> <body>
>> <div id='1div'style="padding:200px;background-color:red"
>> onClick="setBackground('1div');">
>> <div id='2div' style="padding:100px;background-color:yellow"
>> onClick="setBackground('2div');"></div>
>> </div>
>> </body>
>> </html>

--
Bas Cost Budde
Holland
www.heuveltop.nl/BasCB/msac_index.html

11-18-2006

vfk799 wrote:

> This question may be as much about css as javascript. Here is my code.
>
> <html>
> <head>
> <script>
> function setBackground(id) {
> window.alert(id);
> document.getElementById(id).style.backgroundColor= 'blue';
> event.cancelBubble=true;
> }
> </script>
> <body>
> <div id='1div'style="padding:200px;background-color:red"
> onClick="setBackground('1div');">
> <div id='2div' style="padding:100px;background-color:yellow"
> onClick="setBackground('2div');"></div>
> </div>
> </body>
> </html>
>
> I wish to change the yellow color to blue by clicking on it which works
> fine for the above code.
>
> However, if the padding:200px style of 1div is replaced with
> height:300px then, when I click the yellow area (2div), the event is
> handled by 1div rather than 2div. Can anyone explain the difference and
> how I can change only the yellow area of 2div with the second style.

<div id='2div' style="padding:100px;background-color:yellow"
onClick="setBackground('2div');
event.cancelBubble=true;
if(event.stopPropagation)event.stopPropagation()">
</div>

11-18-2006

Thank you for your responses. Unfortunately the code given by both
Davey and Bas Cost Budde seem to do exactly the same as my own code. To
answer Daz's point, "by clicking on the inside div element, you are
also, clicking on the outer div element", This would also be true for
the first style but the code works for the first style.

11-18-2006

vfk799 wrote:
> Thank you for your responses. Unfortunately the code given by both
> Davey and Bas Cost Budde seem to do exactly the same as my own code. To
> answer Daz's point, "by clicking on the inside div element, you are
> also, clicking on the outer div element", This would also be true for
> the first style but the code works for the first style.

Some obscure case with IE... It worked for me if I define position for
the inner div:
position: relative;
left:0;
right:0;

It may be one of outcomes of the "hasLayout" issue.

11-19-2006

I should have mentioned that I was only tesing in IE. I only need this
to work in IE. In fact all of the above works in Firefox. So it does
seem to be an IE issue.

Having looked into VK's suggestion about 'has layout', two things seem
to affect whether or not the inner div has its code carried out. The
first is whether or not it has textual content of its own which can be
clicked on, (although that still doesn't work if only the surrounding
padding is clicked), and the second is whether or not it has at least
one layout attribute.

So without either of these, the inner div's code seems to be
'unreachable'. I can query whether or not an element 'has layout' with
getElementById(id).currentStyle.hasLayout but of course this is only of
use if the element's code is reachable in the first place.

So I'm clicking on a whopping big yellow box which clearly exists and I
need to reach its event handler. Any ideas would be much appreciated.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
dealing with nested xml within nested xml within......	Ultrus	Python	3	07-09-2007 09:00 PM
Is nested class automatically friend of class that it is nested in?	request@no_spam.com	C++	5	09-25-2006 08:31 AM
Nested Vector Nester Classes are Nested in my Brain	Chad E. Dollins	C++	3	11-08-2005 04:46 AM
Events Events Events Please Help	Chris	ASP .Net Web Controls	0	08-30-2005 08:21 PM
Nested iterators (well, not nested exactly...)	Russ Perry Jr	Java	2	08-20-2004 06:51 PM