Rüdiger Plantiko

Zurück
Ein selbstprogrammiertes Tooltipfenster in Form eines Bereichs, der durch die Ereignisse mouseover und mouseout aktiviert und deaktiviert wird, kann manchmal einen merkwürdigen Flackereffekt haben: Wenn man mit der Maus über das betreffende Element fährt, schaltet sich das Tooltipfenster in schneller Folge ein und aus.

Das passiert immer dann, wenn der aufgeblendete Tooltip das mit der Maus überfahrene Element verdeckt. Dann ändert sich ja die Mausposition, und es gibt ein mouseout-Event. Dieses führt zur Ausschaltung des Tooltips. Dann wird aber das Element nicht mehr verdeckt, so dass das System wieder mouseover meldet. Dadurch wird aber der Tooltip wieder angezeigt, das Element wieder verdeckt usw.

Die Lösung steht bei http://dynamic-tools.net/toolbox/isMouseLeaveOrEnter/ . Es gibt ein Attribut relatedTarget, das bei mouseover eine Referenz auf das Element enthält, von dem die Maus herkam und bei mouseout auf das Element, in das sie sich hineinbewegt. Mit der folgenden Funktion kann man erkennen, ob das relatedTarget ein Kindelement des ereignisbehandelnden Elements ist. Nur wenn die Funktion true liefert, sollte der Ereignisbehandler tätig werden.

// this function determines whether the event is the equivalent of the microsoft 
// mouseleave or mouseenter events. 
function isMouseLeaveOrEnter(e, handler) {
  if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
  var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; 
  while (reltg && reltg != handler) reltg = reltg.parentNode; 
  return (reltg != handler); 
  }
Veröffentlicht: Mittwoch, den 18. Mai 2011