mouseenter以及mouseleave兼容性

在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浏览器都已经实现了这两个事件,所以我们就没有必要

  在进行事件修复。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

05-老马jQuery教程-动画

前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实...

1955
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(六)Vue的组件

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

944
来自专栏python成长之路

Pygame常用方法

6095
来自专栏抠抠空间

JavaScript之DOM

一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

3095
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

2933
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

56811
来自专栏从零开始学自动化测试

appium+python自动化26-模拟手势点击坐标(tap)

前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 一、 tap用法 1.tap是...

5264
来自专栏卡少编程之旅

Vue进阶部分文档研读和学习

3137
来自专栏Google Dart

AngularDart Material Design 下拉列表 顶

material-dropdown-select组件结合了material-select和material-button-down的API。

1472
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1122

扫码关注云+社区

领取腾讯云代金券