onmouseout handler in list (quite strange)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • 50295@web.de
    #1

    onmouseout handler in list (quite strange)

    Hi!

    Javascript is doing something funny here. I expect that the onmouseout
    handler "leave" should be called only when the mosuse has left the
    entire list UL, but its triggered everytime, I move from one LI element
    to the other. Why is this so?

    Actually, I'm working on a collapsable menu (too long to post), and the
    plan is to have make the onmouseout handler do the collapsing, and its
    working excellently in IE, but not quite as well in NN, and FF.
    Sometimes, the menu collapses when I move out, and at other times not.
    Is there a Mozilla CSS fix for this? You know like -moz-user-select?
    ....

    Thanks

    - Olumide


    ////////////// HTML code ///////////////


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Untitl ed Document</title>

    <script type="text/javascript">

    function leave() {
    alert("I left");
    }

    </script>

    <STYLE>
    li {
    background-color: #FFFFFF;
    font-weight: normal;
    font-family: arial;
    font-size: 12px;

    text-align: center;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    }

    ul{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;
    }

    a {
    display: block;
    width: 200px;
    text-decoration: none;
    color: #000000;
    }

    </STYLE>

    </head>

    <body>

    <ul onMouseOut="lea ve()">
    <li><a href="#">Europe </a></li>
    <li><a href="#">Africa </a></li>
    <li><a href="#">Americ a</a></li>
    <li><a href="#">Asia</a></li>
    </ul>

    </body>
    </html>

    Tags: None
    • McKirahan
      #2
      Re: onmouseout handler in list (quite strange)

      <50295@web.de > wrote in message
      news:1115593747 .436193.241450@ f14g2000cwb.goo glegroups.com.. .[color=blue]
      > Hi!
      >
      > Javascript is doing something funny here. I expect that the onmouseout
      > handler "leave" should be called only when the mosuse has left the
      > entire list UL, but its triggered everytime, I move from one LI element
      > to the other. Why is this so?
      >
      > Actually, I'm working on a collapsable menu (too long to post), and the
      > plan is to have make the onmouseout handler do the collapsing, and its
      > working excellently in IE, but not quite as well in NN, and FF.
      > Sometimes, the menu collapses when I move out, and at other times not.
      > Is there a Mozilla CSS fix for this? You know like -moz-user-select?
      > ...
      >
      > Thanks
      >
      > - Olumide[/color]

      [snip]

      I can't answer your question but:

      a) under IE5.5 I get two alerts for each MouseOut;

      b) removing "border: 1px solid black;" gives only one alert;

      c) Firefix always gives only one alert per LI;

      d) Netscape 6.2.2 doesn't give any alerts either way.


        Comment

        • Fred Oz
          #3
          Re: onmouseout handler in list (quite strange)

          50295@web.de wrote:[color=blue]
          > Hi!
          >
          > Javascript is doing something funny here. I expect that the onmouseout
          > handler "leave" should be called only when the mosuse has left the
          > entire list UL, but its triggered everytime, I move from one LI element
          > to the other. Why is this so?
          >
          > Actually, I'm working on a collapsable menu (too long to post), and the
          > plan is to have make the onmouseout handler do the collapsing, and its
          > working excellently in IE, but not quite as well in NN, and FF.
          > Sometimes, the menu collapses when I move out, and at other times not.
          > Is there a Mozilla CSS fix for this? You know like -moz-user-select?
          > ....
          >
          > Thanks
          >[/color]
          [...]

          There are some pure CSS menus here:

          <URL:http://www.stylephreak .com/index.php/archives/2004/05/css-only-branching-menu/>

          <URL:http://www.howtocreate .co.uk/tutorials/testMenu.html>

          For an explanation of the differences between the IE and Geko event
          models:

          <URL:http://www.quirksmode. org/>

          Follow the links: JavaScript -> Events

          or start here (no frames):

          <URL:http://www.quirksmode. org/js/introevents.htm l>

          Be prepared for a lot of reading and play, but if you want to
          understand events...

          Lastly, using mouseover/out to trigger DHTML menus in Geko browsers
          is notoriously flakey if you don't know what you are doing.

          --
          Fred

            Comment

            • Jimnbigd
              #4
              Re: onmouseout handler in list (quite strange)

              Odd. It fails for me too. But I got it to work by adding a dummy
              onMouseOver:
              <ul onMouseOver=() onMouseOut="lea ve()">
              I am using IE.
              ....Jim Lee, Dallas, TX...

              <50295@web.de > wrote in message
              news:1115593747 .436193.241450@ f14g2000cwb.goo glegroups.com.. .[color=blue]
              > Hi!
              >
              > Javascript is doing something funny here. I expect that the onmouseout
              > handler "leave" should be called only when the mosuse has left the
              > entire list UL, but its triggered everytime, I move from one LI element
              > to the other. Why is this so?
              >
              > Actually, I'm working on a collapsable menu (too long to post), and the
              > plan is to have make the onmouseout handler do the collapsing, and its
              > working excellently in IE, but not quite as well in NN, and FF.
              > Sometimes, the menu collapses when I move out, and at other times not.
              > Is there a Mozilla CSS fix for this? You know like -moz-user-select?
              > ...
              >
              > Thanks
              >
              > - Olumide
              >
              >
              > ////////////// HTML code ///////////////
              >
              >
              > <html>
              > <head>
              > <meta http-equiv="Content-Type" content="text/html;
              > charset=iso-8859-1">
              > <title>Untitl ed Document</title>
              >
              > <script type="text/javascript">
              >
              > function leave() {
              > alert("I left");
              > }
              >
              > </script>
              >
              > <STYLE>
              > li {
              > background-color: #FFFFFF;
              > font-weight: normal;
              > font-family: arial;
              > font-size: 12px;
              >
              > text-align: center;
              > margin: 0;
              > padding: 0;
              > border: 1px solid black;
              > }
              >
              > ul{
              > margin: 0;
              > padding: 0;
              > list-style: none;
              > width: 200px;
              > }
              >
              > a {
              > display: block;
              > width: 200px;
              > text-decoration: none;
              > color: #000000;
              > }
              >
              > </STYLE>
              >
              > </head>
              >
              > <body>
              >
              > <ul onMouseOut="lea ve()">
              > <li><a href="#">Europe </a></li>
              > <li><a href="#">Africa </a></li>
              > <li><a href="#">Americ a</a></li>
              > <li><a href="#">Asia</a></li>
              > </ul>
              >
              > </body>
              > </html>
              >[/color]


                Comment

                • VK
                  #5
                  Re: onmouseout handler in list (quite strange)

                  Because the events are "bubbling" in the modern event model (IE as well
                  as all wonnabes). Other word, an event "bubble" pops up from the
                  deepest inderlaying element which is visible and enabled (<a> in your
                  case) and goes through the whole document structure to the very top
                  (which is window).
                  This very questionnable system is real easy for a privitive events
                  handling in a simple document (this is why it eventually won). From the
                  other side it makes a terrible mess in more or less complicated
                  situations.
                  An evident solution would be to do events "back tracing" to find out
                  which element really produced the event. Unfortunately it's nearly
                  impossible. W3 solution is done in unnecessary complicated and
                  contradicting way (as many other things they did). And IE "pseudo-W3"
                  solution is simply broken and I don't see any attempts to fix it over
                  the last two years.

                  You may use IE-exclisive solution this way:

                  function leave() {
                  if (window.event.t oElement.tagNam e=='BODY') {
                  alert('Gocha!") ;
                  }
                  }
                  /* A question for million $: what if your list is not on the page
                  itself, but within another element like say <div>? You need to update
                  tagName== to the appropriate tag name. As you can see, IE proprietary
                  model sucks too. */

                    Comment

                    • Thomas 'PointedEars' Lahn
                      #6
                      Re: onmouseout handler in list (quite strange)

                      VK wrote:
                      [color=blue]
                      > [Event bubbling]
                      > This very questionnable system is real easy for a privitive events
                      > handling in a simple document (this is why it eventually won). From the
                      > other side it makes a terrible mess in more or less complicated
                      > situations.[/color]

                      Probably you are not willing to explain why you distribute such FUD here.


                      PointedEars

                        Comment

                        Previous template Next
                        Working...