javascript 兼容FF的onmouseenter和onmouseleave的代码

 更新时间:2008年07月19日 19:33:32   作者:  
经过测试发现,例子1 在 ff下抖动的厉害,ie下稍微有点。 具体原因 其实就是 mouseout 的冒泡机制 引起的。

IE下有 onmouseenter和onmouseleave来解决。
可惜ff就没有。  我再想 , 为什么这么好的功能,为什么ff不引用呢?
还有ie中的onpropertychange  ,哎,ff中都没有。。。

对比例子中引入了一段js ,来兼容FF的onmouseenter和onmouseleave. :
复制代码 代码如下:

var xb =
{
    evtHash: [],

    ieGetUniqueID: function(_elem)
    {
        if (_elem === window) { return 'theWindow'; }
        else if (_elem === document) { return 'theDocument'; }
        else { return _elem.uniqueID; }
    },

    addEvent: function(_elem, _evtName, _fn, _useCapture)
    {
        if (typeof _elem.addEventListener != 'undefined')
        {
            if (_evtName == 'mouseenter')
                { _elem.addEventListener('mouseover', xb.mouseEnter(_fn), _useCapture); }
            else if (_evtName == 'mouseleave')
                { _elem.addEventListener('mouseout', xb.mouseEnter(_fn), _useCapture); } 
            else
                { _elem.addEventListener(_evtName, _fn, _useCapture); }
        }
        else if (typeof _elem.attachEvent != 'undefined')
        {
            var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt_' + _evtName + '::fn_' + _fn + '}';
            var f = xb.evtHash[key];
            if (typeof f != 'undefined')
                { return; }

            f = function()
            {
                _fn.call(_elem);
            };

            xb.evtHash[key] = f;
            _elem.attachEvent('on' + _evtName, f);

            // attach unload event to the window to clean up possibly IE memory leaks
            window.attachEvent('onunload', function()
            {
                _elem.detachEvent('on' + _evtName, f);
            });

            key = null;
            //f = null;   /* DON'T null this out, or we won't be able to detach it */
        }
        else
            { _elem['on' + _evtName] = _fn; }
    },    

    removeEvent: function(_elem, _evtName, _fn, _useCapture)
    {
        if (typeof _elem.removeEventListener != 'undefined')
            { _elem.removeEventListener(_evtName, _fn, _useCapture); }
        else if (typeof _elem.detachEvent != 'undefined')
        {
            var key = '{FNKEY::obj_' + xb.ieGetUniqueID(_elem) + '::evt' + _evtName + '::fn_' + _fn + '}';
            var f = xb.evtHash[key];
            if (typeof f != 'undefined')
            {
                _elem.detachEvent('on' + _evtName, f);
                delete xb.evtHash[key];
            }

            key = null;
            //f = null;   /* DON'T null this out, or we won't be able to detach it */
        }
    },

    mouseEnter: function(_pFn)
    {
        return function(_evt)
        {
            var relTarget = _evt.relatedTarget;                
            if (this == relTarget || xb.isAChildOf(this, relTarget))
                { return; }

            _pFn.call(this, _evt);
        }
    },

    isAChildOf: function(_parent, _child)
    {
        if (_parent == _child) { return false };

        while (_child && _child != _parent)
            { _child = _child.parentNode; }

        return _child == _parent;
    }    
};
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=952

相关文章

  • JavaScript实现动态留言板

    JavaScript实现动态留言板

    这篇文章主要为大家详细介绍了JavaScript实现动态留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 小程序按钮避免多次调用接口和点击方案实现(不用showLoading)

    小程序按钮避免多次调用接口和点击方案实现(不用showLoading)

    这篇文章主要介绍了小程序按钮避免多次调用接口和点击方案实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 用JS实现贪吃蛇小游戏

    用JS实现贪吃蛇小游戏

    这篇文章主要为大家详细介绍了用JS实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • js indexOf 的正确用法示例详解

    js indexOf 的正确用法示例详解

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,这篇文章主要介绍了js indexOf 的正确用法,需要的朋友可以参考下
    2023-02-02
  • 利用js实现简易红绿灯

    利用js实现简易红绿灯

    这篇文章主要介绍了利用js实现简易红绿灯,帮助大家更好的利用js制作特效,美化网页,感兴趣的朋友可以了解下
    2020-10-10
  • javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项(实例代码)

    javascript获取所有同类checkbox选项的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码

    js取滚动条的尺寸的函数代码,需要的朋友可以参考下。
    2011-11-11
  • js获取最近一周一个月三个月时间的简单示例

    js获取最近一周一个月三个月时间的简单示例

    时间的获取和格式化是我们经常遇到的问题,下面这篇文章主要给大家介绍了关于利用js如何获取最近一周一个月三个月时间的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • layui 给数据表格加序号的方法

    layui 给数据表格加序号的方法

    今天小编就为大家分享一篇layui 给数据表格加序号的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 微信小程序实现音乐播放页面布局

    微信小程序实现音乐播放页面布局

    这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论