码迷,mamicode.com
首页 > 其他好文 > 详细

mouseenter以及mouseleave兼容性

时间:2014-11-21 12:20:47      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   使用   sp   on   

在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早起的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用

mouseenter事件来防止子元素的冒泡,这就涉及到事件兼容性的问题了。

先比较mouseenter和mouseover的异同点,当从元素外围进入元素内部时同时触发mouseover和mouseenter事件,但是在元素内部,

鼠标进入元素子节点时会继续触发mouseover事件,该事件是可以向上冒泡的;对于mouseenter则不会冒泡,当然也不会触发该事件。

mouseleave亦然。

用mouseover来模拟mouseenter的关键在于利用事件的relatedTarget判定鼠标是否在元素内部移动,这也涉及到dom元素contain()

的实现。为了高效的实现contain方法,尽量使用浏览器的原生API,如果没有则只能向上回溯。

  

function contain(p,c){
                if(p == c)return false;
                if(p.compareDocumentPosition){
                    return !!(p.compareDocumentPosition(c) & 16);
                }else if(p.contains){
                    return p.contains(c);
                }
                var cur;
                while(c = c.parentNode){
                    if(c.nodeType == 3 || c.nodeType == 8) continue;
                    if(c !== p) continue;
                    else{
                        return true;
                    }
                }
                return false;
 }

  然后着重修复mouseover事件:

  

var fixMouseenter = function(el,fn){
                return window.VBArray ?  {
                    el: el,
                    type: ‘mouseenter‘,
                    fn: fn
                } : {
                    el: el,
                    type: ‘mouseover‘,
                    fn: function(e){
                        contain(e.relatedTarget,this) && fn.call(this,arguments);
                    }
                };
            };
            var fixMouseleave = function(el,fn){
                return window.VBArray ?  {
                    el: el,
                    type: ‘mouseleave‘,
                    fn: fn
                } : {
                    el: el,
                    type: ‘mouseout‘,
                    fn: function(e){
                        contain(e.relatedTarget,this) && fn.call(this,arguments);
                    }
                };
            };

  这样对于非IE浏览器都进行事件修复,但是缺点也有不少,就是新版本的w3c浏览器都已经实现了这两个事件,所以我们就没有必要

  在进行事件修复。

mouseenter以及mouseleave兼容性

标签:style   blog   io   ar   color   os   使用   sp   on   

原文地址:http://www.cnblogs.com/accordion/p/4112408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!