Mouse events within a DIV layer and Netscape/Mozilla

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Jean-Gael GRICOURT
    #1

    Mouse events within a DIV layer and Netscape/Mozilla

    I am trying to capture mouse events when entering and leaving a DIV
    layer. This test code works fine with IE 6.0 and Opera 7.21 but fails
    with Mozilla/Netscape. The strange thing is that the mouse events
    respond continuously whenever the mouse is moving inside the DIV area.

    Does anybody have a clue about what is happenning ?

    J2G


    ==== TEST CODE ====

    <html>
    <head>
    <script type=text/javascript>
    function show() {
    nbIn=0;
    nbOut=0;
    document.getEle mentById('AREA' ).style.visibil ity = 'visible';
    }

    function areaIn() {
    nbIn++;
    window.status = "out: " + nbOut + " in: " + nbIn;
    }

    function areaOut() {
    nbOut++;
    window.status = "out: " + nbOut + " in: " + nbIn;
    }

    </script>
    </head>
    <body>

    <a href="javascrip t:show()">SHOW DIV</a>
    <p>

    <div id="AREA" size=5 style="visibili ty: hidden"
    onmouseover="ja vascript:areaIn ()" onmouseout="jav ascript:areaOut ()">
    <select size=5>
    <option>value 01
    <option>value 02
    <option>value 03
    <option>value 04
    <option>value 05
    <option>value 06
    </select>
    </div>

    </body>
    </html>
    Tags: None
    • Martin Honnen
      #2
      Re: Mouse events within a DIV layer and Netscape/Mozilla



      Jean-Gael GRICOURT wrote:
      [color=blue]
      > I am trying to capture mouse events when entering and leaving a DIV
      > layer. This test code works fine with IE 6.0 and Opera 7.21 but fails
      > with Mozilla/Netscape. The strange thing is that the mouse events
      > respond continuously whenever the mouse is moving inside the DIV area.
      >
      > Does anybody have a clue about what is happenning ?[/color]

      Yes, the events mouseout/mouseover fire whenever the mouse moves
      over/out any element, your div has a child element, the <select>, which
      has child elements, the <option> elements, and when you move your mouse
      over the select element then mouseout for the <div> is fired and
      mouseover for the <select>. And events bubble, so any events happening
      on the <select> or the <option> bubble up to the <div> and fire your
      onmouseover/onmouseout handler. See
      Attention Required! | Cloudflare
      http://www.faqts.com/knowledge_base/view.phtml/aid/1606/fid/145

      for a solution.
      [color=blue]
      > <div id="AREA" size=5 style="visibili ty: hidden"
      > onmouseover="ja vascript:areaIn ()" onmouseout="jav ascript:areaOut ()">
      > <select size=5>
      > <option>value 01
      > <option>value 02
      > <option>value 03
      > <option>value 04
      > <option>value 05
      > <option>value 06
      > </select>
      > </div>[/color]



      --

      Martin Honnen
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/


        Comment

        Previous template Next
        Working...