在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(el,e.relatedTarget) && 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(el,e.relatedTarget) && fn.call(this,arguments);
}
};
};

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

  在进行事件修复。

mouseenter以及mouseleave兼容性的更多相关文章

  1. 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

    滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...

  2. ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法

    记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...

  3. mouseover和mouseout、mouseenter和mouseleave

    又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...

  4. mouseover,mouseout,mouseenter,mouseleave的区别

    相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...

  5. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  6. Delphi下TLabel鼠标MouseEnter、MouseLeave更改颜色失灵

    在Delphi 7下,如果想在鼠标MouseEnter.MouseLeave的时候改变TLabel自身的颜色,很多人可能会采用 Label.Color := clRed;这样的方式来实现,我当初也是一 ...

  7. Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...

  8. mouseover,mouseout与mouseenter,mouseleave

    针对单个元素,使用感一样. 差异提现在有子元素的情况下: mouseover和mouseout在父元素和其子元素都可以触发,当鼠标穿过一个元素时,触发次数得依子元素数量而言. mouseenter和m ...

  9. Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

随机推荐

  1. 取消TableViewCell选中状态的外观变化

    tabelViewcell 使用Xib创建自定义外观的时候,在tableview选中的时候,cell的外观会发生变化,在定义Xib中如下图将选中的外观状态取消掉 也有其他选项,可以选择控制选中的时候的 ...

  2. 使用THINKPHP中的控制器和模块查询数据库

    1,自定义一个UserController的控制器,导入tp的控制器与模块执行相应的操作. ----var_dump()方法是判断一个变量的类型与长度,并输出变量的数值,如果变量有值输的是变量的值. ...

  3. C++指针类型识别正确姿势

    指针是C和C++中编程最复杂也是最有技巧的部分,但对于新手来说,指针无疑是最致命的,让很多人望而退步.不过很多事情都是从陌生开始,然后渐渐熟悉起来的,就像交朋友一样,得花点时间去培养感情才行.不过指针 ...

  4. 非常棒的Android对话框效果

    FlycoDialog_Master http://www.see-source.com/androidwidget/detail.html?wid=488 带有各种动画效果的弹出对话框控件.你也可以 ...

  5. 【完全开源】Django多人博客系统——支持MarkDown和tinyMce

    目录 说明 功能 如何使用 说明 这是一个用Django开发的多人博客系统,功能简单,但完全满足公司内部或个人的博客使用需求.支持普通富文本编辑器(tinyMCE)和MarkDown编辑器 由于嫌弃D ...

  6. svg格式的中国地图轮廓图

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C ...

  7. java中类的加载情况

    当一个类存在继承且与其他类有关联情况时,类中各模块加载顺序如下: 1.首先找到public类,判断该类是否继承其他类,如果没有继承其他类(Object类除外),则加载该类:否则转去加载该类的超类,超类 ...

  8. C#实现DNS解析服务和智能DNS服务

    C#实现DNS解析服务有一个开源项目ARSoft.Tools.Net, ARSoft.Tools.Net是一个非常强大的开源DNS控件库,包含.Net SPF validation, SenderID ...

  9. Code First开发系列之管理数据库创建,填充种子数据以及LINQ操作详解

    返回<8天掌握EF的Code First开发>总目录 本篇目录 管理数据库创建 管理数据库连接 管理数据库初始化 填充种子数据 LINQ to Entities详解 什么是LINQ to ...

  10. .NET中那些所谓的新语法之一:自动属性、隐式类型、命名参数与自动初始化器

    开篇:在日常的.NET开发学习中,我们往往会接触到一些较新的语法,它们相对以前的老语法相比,做了很多的改进,简化了很多繁杂的代码格式,也大大减少了我们这些菜鸟码农的代码量.但是,在开心欢乐之余,我们也 ...