javascript - trick to simulate mouseenter and mouseleave -

joe.bq.wang

浏览: 399686 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trick to simulate mouseenter and mouseleave

博客分类：

javascript

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>

分享到：

javascript - trick to cross browser DOM ... | wpf - addowner details, use and study

2012-08-23 08:31
浏览 2253
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to simulate mouseenter and mouseleave

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to simulate mouseenter and mouseleave

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

javascript - trick/guideline to remove DOM element

最近访客更多访客>>