[Javascript] ONMOUSEOUT being triggered too many times

[Lau]

Okay I stopped all the events bubbling up but now the DIV events only trigger intermitantly.
has anyone got an explanation and/or a workaround for this?

here's my test code:

<DIV ID=menu onmouseover='document.getElementById("DivStatus").innerHTML+="OVER DIV "' onmouseout='document.getElementById("DivStatus").innerHTML+="OUT OF DIV - "' >
<TABLE ID=t1 WIDTH=120 BORDER=1 CELLPADDING=0 CELLSPACING=0>
<THEAD></THEAD>
<TBODY>
<TR><TD>option 1</TD></TR>
<TR><TD>option 1</TD></TR>
</TBODY></TABLE>
</DIV>

<SCRIPT>
function na() {event.cancelBubble=true}
var t1a=t1.all;
for(x=0;x<t1a.length;x++) {
     t1a[x].attachEvent("onmouseover",na)}
</SCRIPT>
<P></P>
<TABLE WIDTH=600 BORDER=1 CELLPADDING=0 CELLSPACING=0>
<TR><TD><SPAN ID=DivStatus>&nbsp;</SPAN></TD></TR>
</TABLE>

regards,
Lau


----- Original Message ----- 
  From: Parkes, Rohan 
  To: 'javascript at LaTech.edu' 
  Sent: Wednesday, August 15, 2001 10:51 AM
  Subject: RE: [Javascript] ONMOUSEOUT being triggered too many times


  That code isn't quite right, sorry;
   
  What you need to do is add the cancel code to your event handler, as in 
   
  onmouseover="doFunction(); event.cancelBubble = true;" 

  Rohan Parkes 


  -----Original Message-----
  From: Parkes, Rohan [mailto:parkesr1 at anz.com]
  Sent: 15 August 2001 10:47
  To: 'javascript at LaTech.edu'
  Subject: RE: [Javascript] ONMOUSEOUT being triggered too many times



    What's wrong is that you have the event-handler at the top of an element tree. You have to take into account the event-bubbling behaviour of IE - events bubble up from lower elements to higher ones. Consequently, the table elements generate their own events, which are cpatured by the onmoueout in the top DIV.
     
    Unfortunately, you can't turn event-bubbling off at the top level, as you can in NS (one of NS's very few advantages over IE). Instead, you have to add an attribute to each lower element whose event bubble you want to disable:
     
    event.cancelBubble="true"

    Rohan Parkes 


    -----Original Message-----
    From: Lau [mailto:lau at goldenweb.com.au]
    Sent: 14 August 2001 19:06
    To: javascript at LaTech.edu
    Subject: [Javascript] ONMOUSEOUT being triggered too many times



      Hi all,

      How do I get around this problem?
      I have a DIV with a TABLE in it that I'm using as a popup menu.
      Its initially HIDDEN and becomes VISIBLE when the cursor moves over a link.
      So when the mouse leaves the DIV I want the menu to become HIDDEN again.
      Sounds easy but the problem is that I'm getting the ONMOUSEOUT event being triggered when the cursor
      moves from one table row to the next, followed by another ONMOUSEOVER as it enters the next row.

      Here's sample code demonstrating the problem:

      <DIV ID=menu STYLE='position: absolute; left: 200px; top: 300px;visibility: visible'
      onmouseover='alert("in");' onmouseout='alert("out");'>
      <TABLE WIDTH=120 BORDER=1 CELLPADDING=0 CELLSPACING=0>
      <TR><TD>option1</TD></TR>
      <TR><TD>option2</TD></TR>
      </TABLE>
      </DIV>


      regards
      Lau


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20010815/7c40e60c/attachment.htm>