CODEWITHSUNDEEP
javascriptselecthtml-listsonmouseout
tiswas
tiswas

Reputation: 2101

problem with onmouseout for my javascript custom select

I've created a custom select using javascript as described here: http://v2.easy-designs.net/articles/replaceSelect/

The key idea is that the select is built of a containing two (in my case)

  • s. What I want to do is add an onmouseover function that should read something like:

    ulNode.onmouseout = function() {
      if (ulNode.className.indexOf('selectOpen') !- -1){
         selectMe(li[0]);
      }
}

    i.e. if the mouse leaves the ul, and the ul is open, the first element should be selected. This works fine, but this function gets called when I move my mouse between li's, even though I haven't left the containing ul. Any ideas why that might happen?

    Thanks in advance!

    Upvotes: 0

    Views: 705

    • Answers (2)

    aorcsik
    aorcsik

    Reputation: 15552

    Try implementing some delay before the mouseout event like this:

    var hover_to = null;
$("ul").mouseover(function() {
   window.clearTimeout(hover_to);
   // (A) your stuff...
}).mouseout(function() {
   hover_to = window.setTimeout(function() {
      // (B) your stuff...
   },200);
});

    This hopefully handles the nonwanted atomic events. Careful with the scope in (B).

    Upvotes: 1

    egze
    egze

    Reputation: 3236

    mouseover and mouseout are wrong king of events for this case. They are fired way too often when you have other elements inside the element that has mouseout event. You need something like mouseleave and mouseenter

    Mouseleave in jQuery

    Upvotes: 3

    Related Questions