mouse events on div element in IE 6

nutso fasst · Apr 18, 2005

If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf

RobG · Apr 19, 2005

nutso said:
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf

I think what you are asking is more a CSS question than JavaScript,
so if you want a better answer try:

comp.infosystems.www.authoring.stylesheets

To see your DIV's dimensions, give it a border and (pale) background.

My take is that by default, DIV's take up the entire page width, but
are only as high as needed for their content. When you give them
position: absolute without any height or width, they will
shrink to fit the content both in width and height.

If you make them smaller than the content using width & height, and
allow the content to overlap the edges, clicking outside the DIV but
over the overlapping internal elements will still cause the div
onclick to fire because the event will bubble up the DOM unless you
stop it.

Events from overlapping elements that are not below the DIV in the
DOM will not bubble up into the div (z-index can influence which of
the overlapping elements gets the click in the first place).

The best idea is to create some simple divs, put onclicks on them,
move them around on the page and within the DOM and see what happens.

The sometimes conflicting view of the DOM structure versus the
position of displayed elements can be confusing - or am I making it
worse?

RobB · Apr 19, 2005

nutso said:
If a div is positioned block or relative, events fire over the entire area
of the div. If the div is positioned absolute they don't--they only fire
over the div's text or image child elements, if any. This isn't true in FF
or Opera, nor was it true in IE 5. If there is any logic in this behavior,
please edify. It seems a bug to me.

nf

Hey...dude -

Stop fishing without a bait in the dark of a dead water interest
globally.

If you know what I mean.

IE6 is chock-full of interesting 'features' like this one; many seem
related to oddities in the CSS rendering of positional attributes. Try
this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

#rel {
position: relative;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}
#abs1 {
position: absolute;
left: 150px;
top: 160px;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}
#abs2 {
position: absolute;
left: 400px;
top: 300px;
width: 300px;
height: 100px;
padding: 4px;
margin: 4px;
border: 1px #000 solid;
}

</style>
<script type="text/javascript">

if (window.createPopup
&& document.compatMode
&& document.compatMode == 'CSS1Compat')
{
document.onreadystatechange = function()
{
if (document.body)
document.body.style.height = document.documentElement.scrollHeight
+ 'px';
}
}

</script>
</head>
<body>
<div id="rel" onclick="alert(event.srcElement.innerHTML)">relative
[click]</div>
<div id="abs1" onclick="alert(event.srcElement.innerHTML)">absolute 1
[click]</div>
<div id="abs2" onclick="alert(event.srcElement.innerHTML)">absolute 2
[click]</div>
</body>
</html>

Adapted from here, addressing a (seemingly) different issue:

http://blog.tom.me.uk/2003/07/23/boie6selecta.php

nutso fasst · Apr 19, 2005

Thanks for the replies, but this was only an observation, and--sorry to
say--an insufficiently-tested one at that. I now see that the situation only
occurs when the div with mouse event is overlapping another div containing
an image. It's easily overcome by filling the div with a clear GIF. In the
example below, with IE6, mouseover only fires when the cursor is over the
text. if #clickover contains a same-size clear GIF then it works as
expected.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>none</title>
<style type="text/css">
body {
margin: 4%;
}
div {
margin: 0; padding: 0;
}
#container {
position: relative;
width: 100%; height: 0;
z-index: 0;
cursor: pointer;
}
#inner {
position: absolute;
background-color: gray;
top: 0; left: 0; width: 100%; height: 322px;
}
#inner img {
width: 100%; height: 322px;
}
#clickover {
position: relative;
width: 100%; height: 322px;
z-index: 10;
}
span {
background-color: white;
color: black;
}
</style>

<script type="text/javascript">
var cdiv = 0;
var idiv = 0;

function m_over(e) {
cdiv.style.zIndex = '20';
}
function m_out(e) {
cdiv.style.zIndex = '0';
}
function init() {
cdiv=document.getElementById('container');
idiv=document.getElementById('inner');
document.getElementById('clickover').onmouseover = m_over;
idiv.onmouseout = m_out;
}
</script>

</head>

<body onload="init()">
<div id="container"><div id="inner"><img src="images/test.jpg"
alt=""></div></div>
<div id="clickover"><span> this text should be hidden when cursor is
over the image </span></div>
</body>
</html>

Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
Mouse events, images and document bounds	0	Jul 12, 2006
How do you Pass Mouse Events through DIV element to the DIV element beneath it?	1	Apr 27, 2006
Resize inner DIV to fill up outer DIVs height in IE 6	1	Aug 14, 2007
Bottom DIV handles events from top DIV layers only in IE6,7	4	Dec 21, 2008
Absolute element offsets--exercise in futility	137	Apr 12, 2009
Getting Mouse coordinates in a DIV	4	Feb 25, 2005
Safari Textarea and Events	3	Apr 2, 2007

mouse events on div element in IE 6

nutso fasst

RobG

RobB

nutso fasst

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads