为非IE浏览器添加mouseenter，mouseleave事件

sailinglee

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

最近访客更多访客>>

zq_0752

1040087877

HUAGE1969

leimingchao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML & JS & DOM & CSS

浏览器 IE JavaScript Ajax HTML

在学习之前我们先了解几个事件对象属性：

target : 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。
currentTarget : 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/7/8没有对应属性，可在handler内使用this来替代如evt.currentTarget = this。
relativeTarget : 指事件相关的元素，一般用在mouseover，mouseout事件中。IE6/7/8中对应的是fromElement，toElement。

mouseenter ，mouseleave IE9中仍然支持，mouseenter与mouseover区别在于：在元素内部移动时mouseenter不会触发。如下:

<!DOCTYPE HTML>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>
            mouseerter与mouseover区别(IE下测试)
        </title>
    </head>
    
    <body>
        <div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;">
        </div>
        <h3>
            1，鼠标在div[id=parent1]内部移动时也会触发mouseover事件
        </h3>
        <div id="parent1" style="width:400px;border:1px solid gray;padding:5px;">
            <div id="child11" style="width:100px;height:100px;background:gold;float:left;">
                Child11
            </div>
            <div id="child12" style="width:100px;height:100px;background:gold;float:right;">
                Child12
            </div>
            <div style="clear:both;">
            </div>
        </div>
        <br/>
        <h3>
            2，鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件
        </h3>
        <div id="parent2" style="width:400px;border:1px solid gray;padding:5px;">
            <div id="child21" style="width:100px;height:100px;background:gold;float:left;">
                Child21
            </div>
            <div id="child22" style="width:100px;height:100px;background:gold;float:right;">
                Child22
            </div>
            <div style="clear:both;">
            </div>
        </div>
        <script type="text/javascript">
            function on(el, type, fn) {

                el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);

            }

            function $(id) {

                return document.getElementById(id);

            }

            var p1 = $('parent1'),

            p2 = $('parent2');

            function fn(e) {

                var d = document.createElement('div');

                d.innerHTML = e.type;

                $('result').appendChild(d);

            }

            on(p1, 'mouseover', fn);

            on(p2, 'mouseenter', fn);
        </script>
        
        <body>

</html>

了解了这三个属性的意义后，实现起来就很简单:

E = function() {

    function elContains(a, b) {

        try {

            return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);

        } catch(e) {}

    }

    function addEvt(el, type, fn) {

        function fun(e) {

            var a = e.currentTarget,
            b = e.relatedTarget;

            if (!elContains(a, b) && a != b) {

                fn.call(e.currentTarget, e);

            }

        }

        if (el.addEventListener) {

            if (type == 'mouseenter') {

                el.addEventListener('mouseover', fun, false);

            } else if (type == 'mouseleave') {

                el.addEventListener('mouseout', fun, false);

            } else {

                el.addEventListener(type, fn, false);

            }

        } else {

            el.attachEvent('on' + type, fn);

        }

    }

    return {
        addEvt: addEvt
    };

} ();

[转自 :http://www.jzxue.com/wangzhankaifa/javascript-ajax/201103/29-6924.html ]

分享到：

javascript如何检查变量类型 | js实现键盘选择html元素

2011-04-25 09:29
浏览 693
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

为非IE浏览器添加mouseenter，mouseleave事件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

为非IE浏览器添加mouseenter，mouseleave事件

评论

发表评论

相关推荐

循环数组的逻辑怎么写

发布`代码生成器`

MutationObserver

a simple mvvm library - bird

遍历dom tree是一件相当耗时的事情

今天再讲下js里的继承

Text 类型

JavaScript插入动态脚本

innerHTML插入<style>元素

CSS实现相对浏览器窗口定位彻底研究

JavaScript插入动态样式

再理解jQuery；delete原型属性

javascript &&和||

undefined 和 void 0 的区别

Fiddler - 前端开发值得拥有

说说我的web前端之路,分享些前端的好书

JavaScript实现 页面滚动图片加载

JavaScript 操作 Cookie

Javascript定义类（class）的三种方法

服务端解决跨源共享

最近访客更多访客>>

JavaScript实现页面滚动图片加载