`

javascript - trick to simulate mouseenter and mouseleave

阅读更多

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>
 
分享到:
评论

相关推荐

    Pandas-and-NumPy-Tips-Trick-and-Techniques-master.zip

    Pandas-and-NumPy-Tips-Trick-and-Techniques-master

    S-a-D-trick.rar_Join In

    在VB6(Visual Basic 6)中,"S-a-D-trick.rar_Join In" 这个主题涉及到的是文件分割与合并的技术。在处理大文件时,为了方便传输或者存储,我们可能会选择将其分割成多个小文件,而在需要使用整个文件时,则需要将...

    python-trick

    Python-trick,上传的事pdf文档

    在规定的时间内,使用鼠标控制帽子接住落下的保龄球,躲避炸弹。_Hat-Trick.zip

    在规定的时间内,使用鼠标控制帽子接住落下的保龄球,躲避炸弹。_Hat-Trick

    HLP-Trick-crx插件

    【HLP-Trick-crx插件】是一款专为解决特定网页限制而设计的浏览器扩展程序,主要用于恢复用户在浏览网页时被禁用的复制、粘贴功能,以及上下文菜单和本地高亮显示功能。这款插件特别适用于那些因为版权保护或者安全...

    深度学习领域CNN橄榄球比赛NFL目标检测(带数据集)-cnn-baseline-more-tta-trick

    语言:python 内容包括:源码、数据集、数据集描述、论文 目的:使用CNN算法在橄榄球比赛中目标检测。 带数据集很好运行,主页有搭建环境过程。主页有更多源码。 数据集描述如下: 在这场比赛中,你的任务是预测球员...

    gtg-grind-trick-generator

    gtg-grind-trick-generator PWA Web应用程序(Node.js,JS,HTML,CSS) Chrome,Safari,Firefox,Edge(Android,iOS,MacOS,Windows) 离线工作Android应用程式使用Google Workbox,Webpack制作

    py-trick-book:关于 Python 的高级提示和技巧

    Python 提示和技巧 ... git clone https://github.com/plasmashadow/py-trick-book.git 我假设您安装了 ipython 导航到目录并执行 ipython notebook 笔记: 退出间谍活动并自己阅读 或者 保持冷静,加入草帽海贼团

    tips-n-trick

    ...DOCTYPE&gt;声明、元素、元素和元素。&lt;!...包含元数据,如标题()、字符集(&lt;meta charset="UTF-8"&gt;)和链接外部资源(如CSS文件)。则包含网页的可见内容,如文本、图像、链接等。...例如,使用和来定义页面头部和底部,...

    21-card-trick:在 React 中完成的 21 张卡片技巧

    React 21 卡技巧一个演示卡片技巧的React应用程序。动机该项目旨在学习如何使用 React 钩子和进行嵌套的 api 调用。 该项目不再进行。怎么玩记住 21 张卡片中的 1 张后,单击完成。 选择您的卡片所在的 3 堆中的哪一...

    vdr-hattrick-开源

    1. 下载最新版本的源代码,例如压缩包内的hattrick-0.1.6。 2. 在VDR环境中编译和安装插件。这可能需要熟悉Linux环境和基本的编译命令。 3. 配置VDR以启用Hattrick插件,并设置与Hattrick账户的连接信息。 4. 更新...

    CMCC-Trick:招惹CMCC-* WLAN

    Trick-CMCC 利用CMCC公共热点的小漏洞免费上网~~ :) sudo ./conn.sh Notice: 目前只知道我工CMCC有这特色, 其他地区尚不明确 Notice: 脚本适用于使用NetWorkManager网络sds管理工具的系统 Notice: 不必惊讶原理, ...

    HLP-绝招「HLP-Trick」-crx插件

    该扩展程序重新启用网页上的复制/粘贴功能,上下文菜单和本机突出显示功能。 支持语言:English (United States)

    [Head.First.JavaScript].Michael.Morrison...

    specialist, you’ll be able to take a cluttered room of JavaScript data and impose your will on it with a flurry of virtual labels and storage bins. storing data Your scripts can store data 34 Scripts...

    Trick

    "Trick"这一主题似乎与一套特别的字体资源相关,其中包括多种不同风格的图像文件(.gif)和TrueType字体文件(.TTF)。让我们深入探讨一下这个话题。 首先,.gif 文件是一种常见的图像格式,支持透明度和动画,常...

    NIO trick and trap NIO网络

    ### NIO Trick and Trap:构建高性能Java NIO网络框架 #### 概述 NIO(New I/O),作为Java平台的一项重要技术革新,为开发者提供了更高效的数据处理方式。相较于传统的IO模型,NIO通过非阻塞式I/O操作、多路复用...

    DSPSIFT.pdf

    The trick consists of pooling gradient orientations across different domain sizes, in addition to spatial locations, and yields a descriptor of the same dimension of the original, which we call DSP-...

    snd-reversingwithlena-tutorials-qq664849305.rar

    10. Continued reversing techniques in VB, use of decompilers and a basic anti-anti-trick 11. Intermediate patching using Olly's "pane window" 12. Guiding a program by multiple patching. 13. The use ...

    The Kernel Trick.pdf

    在机器学习中,核技巧(Kernel Trick)是一种非常重要的技术,它允许我们在高维特征空间中有效地进行线性学习算法的操作,而无需显式地计算出高维空间的数据表示。核技巧在诸如支持向量机(SVM)等算法中发挥了重要...

    重修 Slope Trick(看这篇绝对够!).doc

    - **案例 2**:CF713C Sonya and Problem Without a Legend,此题通过Slope Trick可以大大简化状态转移方程的计算过程。 - **案例 3**:CF13C Sequence 问题,同样可以通过维护转折点集合来优化动态规划的状态转移。...

Global site tag (gtag.js) - Google Analytics