Events in nested div's

V

vfk799

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.
 
D

Daz

vfk799 said:
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.
Click to expand...

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.
 
B

Bas Cost Budde

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:
 
D

Davey

vfk799 said:
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.
Click to expand...

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

vfk799

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.
 
V

VK

vfk799 said:
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.
Click to expand...

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.
 
V

vfk799

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
Please Help? 0
Help with my responsive home page 2
Help with code 0
Filename undefined for Blob ? 1
I Need Help with making a function that draws in a canvas using location data. 1
Help me sort out this script 1

Members online

No members online now.
Total: 38 (members: 0, guests: 38)
Robots: 166

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,150
Latest member
MakersCBDReviews

Latest Threads

Top