javascript - trick to simulate mouseenter and mouseleave

最新推荐文章于 2022-10-11 16:01:48 发布

原创最新推荐文章于 2022-10-11 16:01:48 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用JavaScript模拟mouseenter和mouseleave事件的方法。这些事件由IE引入，用于精确判断鼠标是否位于目标元素内部。通过检测浏览器对这些事件的支持情况，利用mouseover和mouseout事件实现跨浏览器兼容性。

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>