mouse events on div element in IE 6

Discussion in 'Javascript' started by nutso fasst, Apr 18, 2005.

  1. nutso fasst

    nutso fasst Guest

    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
     
    nutso fasst, Apr 18, 2005
    #1
    1. Advertising

  2. nutso fasst

    RobG Guest

    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
     
    RobG, Apr 19, 2005
    #2
    1. Advertising

  3. nutso fasst

    RobB Guest

    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)">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
     
    RobB, Apr 19, 2005
    #3
  4. nutso fasst

    nutso fasst Guest

    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>
     
    nutso fasst, Apr 19, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    778
  2. Jean-Gael GRICOURT

    Mouse events within a DIV layer and Netscape/Mozilla

    Jean-Gael GRICOURT, Nov 2, 2003, in forum: Javascript
    Replies:
    1
    Views:
    122
    Martin Honnen
    Nov 2, 2003
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    209
    David Dorward
    Jun 1, 2005
  4. CRPietschmann
    Replies:
    1
    Views:
    247
    marss
    Apr 28, 2006
  5. Replies:
    1
    Views:
    150
    David Mark
    Oct 2, 2007
Loading...

Share This Page