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

相关文章

  • js图片实时加载提供网页打开速度

    js图片实时加载提供网页打开速度

    没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高,下面有个不错的思路,大家可以看看
    2014-09-09
  • JavaScript实现网站访问次数统计代码

    JavaScript实现网站访问次数统计代码

    每个网站管理者,都必须知道每天有多少人访问了本站,需要一个网站访问次数功能来满足需求,本篇文章主要介绍了JavsScript实现网站访问次数统计代码,需要的朋友可以参考下
    2015-08-08
  • javascript实现花样轮播效果

    javascript实现花样轮播效果

    这篇文章主要为大家详细介绍了javascript实现花样轮播效果,一种是带按钮的轮播,一种是自动轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS实现获取GIF总帧数的方法详解

    JS实现获取GIF总帧数的方法详解

    如何通过js在上传前就拿到它的总帧数来判断呢?本文就跟大家分享一种解决方案,并将其封装成插件发布至npm仓库,快跟随小编一起学习一下吧
    2022-05-05
  • JavaScript使用setTimeout实现倒计时效果

    JavaScript使用setTimeout实现倒计时效果

    这篇文章主要为大家详细介绍了JavaScript使用setTimeout实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • js兼容火狐显示上传图片预览效果的方法

    js兼容火狐显示上传图片预览效果的方法

    这篇文章主要介绍了js兼容火狐显示上传图片预览效果的方法,涉及js调用FileReader实现图片预览功能的技巧,需要的朋友可以参考下
    2015-05-05
  • JS作用域深度解析

    JS作用域深度解析

    这篇文章主要为大家详细介绍了JS作用域,剖析JS的作用域问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 在js文件中写el表达式取不到值的原因及解决方法

    在js文件中写el表达式取不到值的原因及解决方法

    在js文件中写el表达式取不到值,百度一下,将经验总结如下,有类似情况的朋友可以参考下
    2013-12-12
  • 浅谈js多维数组和hash数组定义和使用

    浅谈js多维数组和hash数组定义和使用

    下面小编就为大家带来一篇浅谈js多维数组和hash数组定义和使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS实现简易日历效果

    JS实现简易日历效果

    这篇文章主要为大家详细介绍了JS实现简易日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论