[RESOLVED] DHTML navbar problems firing mouse events when mouse moves from menu onto textboxes

[spieh]

http://home.insightbb.com/~spiehler/intranet/pos.asp

The above link is an example page of the menu I am working on. Part of this menu is based off of the Visibility Toggle found here http://www.interactionarchitect.com/articles/toggle.htm

I use the code from visibility toggle page to make expandable categories and then the dthml menus are inside the expanded content. So you click expand n .. the arrow gif changes and the menu appears. Mousing over the menu changes the color and makes any further submenus show up. I put comments in the source to explain the code.

This example page contains a table showing the total number of mouseovers and mouseouts and the values of several script variables during executing instead of using tedious alert boxes to trace through the script. I found some functions that emulate onmouseenter and onmouseleave for browsers other than IE. They worked great. Script is no longer firing mouse events when it shouldn't. However IF I have a text input or a textarea and move the mouse back and forth from a submenu to the textbox/area the mouse events do not fire properly. This doesn't happen in IE. So in Firefox my menu breaks when this happens. Load up the example page and try it yourself. Click on any of the expand items, and mouse over the submenu and then attempt to close the submenu by mousing onto the textarea to the right. It doesn't close.

So far my assumption is that is has something to do with the checkMouseEnter, checkMouseLeave, and containsDOM functions.

/* So we only want onmouseout to fire when move from inside an element to outside of 
 * the element and onmouseover to fire when we move from outside to inside
 * of the element. Event bubbling causes onmouseover/out to fire when we move
 * the mouse from a sibling element to another sibling element which bubbles up and
 * causes the menu items to change to active when we don't want them to. IE has built-in
 * functions called onmousenter and onmouseleave that do not bubble but other browsers
 * do not have these to we need to emulate them. 
 */
 
// returns true if containee is inside container, false otherwise
function containsDOM (container, containee) {
  do {
    if ((isParent = container == containee))
      break;
    containee = containee.parentNode;
  }
  while (containee != null);
  return isParent;
}

// returns true if mouse moved from outside of element onto element, false otherwise
function checkMouseEnter (evt, element) {
  if (element.contains && evt.fromElement) {
    return !element.contains(evt.fromElement);
  }
  else if (evt.relatedTarget) {
    return !containsDOM(element, evt.relatedTarget);
  }
}

// returns true if mouse moved from insde of element to outside of element, false otherwise
function checkMouseLeave (evt, element) {
  if (element.contains && evt.toElement) {
    return !element.contains(evt.toElement);
  }
  else if (evt.relatedTarget) {
    return !containsDOM(element, evt.relatedTarget);
  }
}

Due to maximum post size I couldn't paste in my entire document source but you can view page source on the example link.

[spieh]

Apparently there is some anonymous div element on the form inputs that is restricted from being accessed. It actually throws an error in the javascript console: Permission denied to get property
HTMLDivElement.parentNode

This is a mozilla bug. https://bugzilla.mozilla.org/show_bug.cgi?id=208427 and does not look like its at all high on the list for being fixed since it has been broken for years.

BUT there is a fix. The problem lies in the containsDOM function.

The line: containee = containee.parentNode is when the error happens when the parentNode is the aforementioned anonymous div element.

So if we encapsulate the statement in a try/catch block.

 try {containee = containee.parentNode;}
    catch (e) {containee = null}

I tested it and the mouse events are properly firing when going to/from the form elements now.