Member Avatar for shaya4207

Hi guys/gals,

I have a menu with a div displaying onmouseover, and hiding onmouseout, it works great except in IE if I click on the <select> tag, it triggers the mouseout event, interestingly enough the same does not happen when I click on a text field..

Code Example:

<ul>
  <li onmouseover="show()" onmouseout="hide()">
    <div id="divToShow">
      <input type="text" /><br />
      <select>
        <option>hello</option>
        <option>bye</option>
      </select>
    </div>
  </li>
</ul>

This is obviously not the real code, it's just to give you an idea, I don't think I can post the real code, cuz it's really long and complicated...

P.S. I'm using the prototype framework, and I'd like to keep it that way if possible...

Thanx in advance

  • 2 Contributors
  • 4 Replies
  • 214 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by shaya4207

Dani AI

Generated

Short answer: this is an Internet Explorer quirk — IE does not treat the native option list the same as ordinary DOM children, so when the browser shows the select’s dropdown the parent element often gets a real mouseout. was pointing in the right direction: browsers vary here (see a cross‑browser test) and IE historically does not deliver mouse events on <option> the way other browsers do. StackOverflow discussion and a browser event comparison show the differences. (See also the experimental event table for selects.)
(https://rodneyrehm.github.io/select-events/)

Practical fixes that work in the wild

  • Prefer mouseenter/mouseleave (they don’t fire when moving into descendants) where available. See MDN for details.
  • In your mouseout handler, test the event’s relatedTarget (standard) or toElement/fromElement (IE) and walk up parentNode to decide whether the pointer actually left the menu. MDN documents relatedTarget and the mouseout semantics.
  • Because native select dropdowns can be implemented outside the page chrome in some browsers, also use a short delay before hiding and cancel that timeout on mouseover — this covers cases where relatedTarget is null or the dropdown is a separate control. You can also ignore hide if a <select> inside the menu has focus. Microsoft docs describe IE’s toElement/fromElement behavior.

Prototype-flavored example (adjust ids/names to match your markup):

var menu = $('yourMenuElement'); // the element that shows/hides
var hideTimer = null;

function isDescendant(parent, node){
  while(node){
    if(node === parent) return true;
    node = node.parentNode;
  }
  return false;
}

Event.observe(menu, 'mouseout', function(ev){
  ev = ev || window.event;
  var rel = ev.relatedTarget || ev.toElement; // relatedTarget (std) / toElement (IE)
  if(rel && isDescendant(menu, rel)) return;     // still inside
  var active = document.activeElement;
  if(active && isDescendant(menu, active)) return; // select has focus
  hideTimer = setTimeout(function(){ hideMenu(menu); }, 180);
});

Event.observe(menu, 'mouseover', function(){ if(hideTimer){ clearTimeout(hideTimer); hideTimer = null; } });

If you still see strange closing/hover behavior in IE, check CSS (some IE bugs arise from styling applied to the select vs option) or use a custom dropdown widget if you need full control. References: MDN (mouseenter / relatedTarget), Microsoft (toElement/fromElement), StackOverflow and the select-event comparison above.

Recommended Answers

All 4 Replies

Member Avatar for twiss

Perhaps you can set a select onclick handler that returns false?

Member Avatar for shaya4207

The thing is, that it doesn't happen when I click on the <select> , it happens when I hover over the <option>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.