javascript - trick to simulate mouseenter and mouseleave

最新推荐文章于 2024-09-14 18:52:56 发布

iteye_13882

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量118

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13882/article/details/82403482

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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>