`

javascript - trick to simulate mouseenter and mouseleave

javascript 
阅读更多

Previously we discussed  javascript - trick to handlers management for add/remove custom events. and 

javascript - trick to detect bubbling supportability to test if a certain event is supported in certain (actually the current) browser.

 

 

mouseenter and mouseleave ae are two custom events that is introduced by IE, while it has superiority in determing if the mouse is and only is within the target element. 

 

the counterparts, mouseover and mouseout has limitation in that it will falsifly fire if the mouse is within child elemnts of the target element.

 

 

below is the code that simulate the mouseenter and mouseleave event with the help of previous discussed addremoveevents and event supportability detects.

 

 

 

/**************************************
*@Name: mouses.js
*  Mouse enter and MouseLeave event are more easier to use to determine when the mouse is currently positioned within an elment, or outside it.
*@Summary
* there are conterparts in almost every browser, which is called  mouseover and mouseout; the problem with them is that 
* @NOTE:
*   this has dependencies on other js files
*     1. isEventSupported.js
*     2. addremoveevents.js
* @todo:
*   Test and add them to the docs
***************************************/

(function () {
  if (isEventSupported("mouseenter")) { 
    this.hover = function(elem, fn) {
      addEvent(elem, "mouseenter", function() { 
        fn.call(elem, "mouseenter");
      });

      addEvent(elem, "mouseleave", function() {
        fn.call(elem, "mouseleave");
      });
    };
  } else {
    this.hover = function(elem, fn) { 
      addEvent(elem, "mouseover", function(e) { 
        withinElement(this, e, "mouseenter", fn);
      });
      addEvent( elem, "mouseout", function(e){
        withinElement( this, e, "mouseleave", fn );
      });
    };
  }

  function withinElement(elem, event, type, handle) {
    // Check if mouse(over|out) are still
    // within the same parent element
    var parent = event.relatedTarget; // this is non-ie, but the event withinEvent is mean to work on non-ie only

    // Traverse up the tree 
    while (parent && parent != elem) { 
      // Firefox sometimes assigns relatedTarget a XUL element
      // which we cannot access the parentNode property of
      try { 
        parent =  parent.parentNode;
      } catch (e) { break; }
    }

    if (parent != elem) { 
       // handle event if we actually just 
       // mouse oon to a non sub-element
       handle.call(elem, type);
    }
  }
})();

 

 

below is the code that hows  you how to use it. 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- mouses.html to test mouses.js -->
    <script type="text/javascript" src="addremoveevents.js"></script>
    <script type="text/javascript" src="isEventSupported.js"></script>
    <script type="text/javascript" src="mouses.js"></script>
    <script type="text/javascript">

      window.onload = function () {
        var div = document.getElementsByTagName('div')[0];
        // the hover event is defined in .js mouses.js file 
        hover(div, function (type) {
          if (type === "mouseenter") {
            this.className = "over";
          } else {
            this.className = "";
          }
        });
      };
    </script>
</head>
<body>
<div>Hover <strong>over</strong> me!</div>
<style>.over { background: yellow; }</style>
</body>
</html>
 
分享到：
| wpf - addowner details, use and study
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics