Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > mouse events on div element in IE 6

Reply
Thread Tools

mouse events on div element in IE 6

 
 
nutso fasst
Guest
Posts: n/a
 
      04-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


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-19-2005
nutso fasst wrote:
> 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?


--
Rob
 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      04-19-2005
nutso fasst wrote:
> 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)">relati ve
[click]</div>
<div id="abs1" onclick="alert(event.srcElement.innerHTML)">absolu te 1
[click]</div>
<div id="abs2" onclick="alert(event.srcElement.innerHTML)">absolu te 2
[click]</div>
</body>
</html>

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

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

 
Reply With Quote
 
nutso fasst
Guest
Posts: n/a
 
      04-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>&nbsp;this text should be hidden when cursor is
over the image&nbsp;</span></div>
</body>
</html>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Pass mouse events through partially transparent element to element below blgroup@gmail.com Javascript 1 10-02-2007 01:36 AM
Heres a mouse theres a mouse what a mouse do? unholy Gaming 37 09-17-2006 08:59 AM
How do you Pass Mouse Events through DIV element to the DIV element beneath it? CRPietschmann Javascript 1 04-28-2006 07:28 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments