Cross-browser MouseEnter/Leave Solution


/ Published in: JavaScript
Save to your folder(s)

In mouseout and mouseover event handlers, use this object to check if the mouse was leaving or entering a "landmark" element. See my [MouseEnter/Leave Handlers](http://snipplr.com/view/8913/mouseenterleave-handlers/) snipplet for a practical use.

`.fromElement`: element the mouse is leaving
`.toElement`: element the mouse is entering
`.inLandmark`: true if the event fired from within the landmark
`.leftLandmark`: true if the mouse was leaving the landmark
`.enteredLandmark`: true if the mouse was entering the landmark


Copy this code and paste it in your HTML
  1. //since mouseenter & mouseleave are only supported in IE, this object helps to
  2. // determine if the mouse is entering or leaving an element
  3. //landmark: did the mouse enter or leave this "landmark" element? Was the event fired from within this element?
  4. //usage: var mbc = new MouseBoundaryCrossing(mouse_event, landmark);
  5. function MouseBoundaryCrossing(evt, landmark)
  6. {
  7. evt = evt || window.event;
  8.  
  9. var eventType = evt.type;
  10.  
  11. this.inLandmark = false;
  12. this.leftLandmark = false;
  13. this.enteredLandmark = false;
  14.  
  15. if(eventType == "mouseout")
  16. {
  17. this.toElement = evt.relatedTarget || evt.toElement;
  18. this.fromElement = evt.target || evt.srcElement;
  19. }
  20. else if(eventType == "mouseover")
  21. {
  22. this.toElement = evt.target || evt.srcElement;
  23. this.fromElement = evt.relatedTarget || evt.fromElement;
  24. }
  25. else throw (new Error("Event type \""+eventType+"\" is irrelevant")); //irrelevant event type
  26.  
  27. //target is unknown
  28. //this seems to happen on the mouseover event when the mouse is already inside the element when the page loads and
  29. // the mouse is moved: fromElement is undefined
  30. if(!this.toElement || !this.fromElement) throw (new Error("Event target(s) undefined"));
  31.  
  32. //determine whether from-element is inside or outside of landmark (i.e., does tmpFrom == the landmark or the document?)
  33. var tmpFrom = this.fromElement;
  34. while(tmpFrom.nodeType == 1) //while tmpFrom is an element node
  35. {
  36. if(tmpFrom == landmark) break;
  37. tmpFrom = tmpFrom.parentNode;
  38. }
  39.  
  40. //determine whether to-element is inside or outside of landmark (i.e., does tmpTo == the landmark or the document?)
  41. var tmpTo = this.toElement;
  42. while(tmpTo.nodeType == 1) //while tmpTo is an element node
  43. {
  44. if(tmpTo == landmark) break;
  45. tmpTo = tmpTo.parentNode;
  46. }
  47.  
  48. if(tmpFrom == landmark && tmpTo == landmark) this.inLandmark = true; //mouse is inside landmark; didn't enter or leave
  49. else if(tmpFrom == landmark && tmpTo != landmark) //mouse left landmark
  50. {
  51. this.leftLandmark = true;
  52. this.inLandmark = (eventType == "mouseout"); //mouseout: currently inside landmark, but leaving now
  53. //mouseover: currently outside of landmark; just left
  54. }
  55. else if(tmpFrom != landmark && tmpTo == landmark) //mouse entered landmark
  56. {
  57. this.enteredLandmark = true;
  58. this.inLandmark = (eventType == "mouseover"); //mouseover: currently inside landmark; just entered
  59. //mouseout: currently outside of landmark, but entering now
  60. }
  61. //else //mouse is outside of landmark; didn't enter or leave
  62. }

URL: http://test.dragonzreef.com/mouseenterleave.htm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.