mouseenter以及mouseleave兼容性
时间:2022-05-04
本文章向大家介绍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浏览器都已经实现了这两个事件,所以我们就没有必要
在进行事件修复。
- 简单易学的机器学习算法——因子分解机(Factorization Machine)
- Elasticsearch全文检索实战小结——复盘我带的第二个项目
- golang语言是如何处理栈的
- 【Go 语言社区】并发性
- GoldenGate数据迁移的问题总结(一)(r10笔记第84天)
- Elasticsearch大文件检索性能提升20倍实践(干货)
- Elasticsearch聚合优化 | 聚合速度提升5倍!
- Elasticsearch聚合后分页深入详解
- 可扩展机器学习——线性回归(linear Regression)
- 简单易学的机器学习算法——Label Propagation
- 利用Theano理解深度学习——Convolutional Neural Networks
- 持续精进——我的2017年终总结
- 实战 | Elasticsearch打造知识库检索系统
- Elasticsearch实战 | 必要的时候,还得空间换时间!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- netty结合Protostuff传输对象案例,单机压测秒级接收35万个对象
- Kubernates之Deployment滚动升级和回滚
- 简记特定容器list和forward_list算法
- Games101--Assignment2
- 快速学习-如何使用sentinel
- springboot-mybatis-demo遇到的坑
- 快速学习-Sentinel 工作主流程
- 快速学习-Sentinel 流量控制
- 快速学习-Sentinel 熔断降级
- C#中关于SqlDataAdapter的Update(dataTable)方法
- Jmeter保存下载的文件
- SNAP Java API处理Sentinel-1数据
- springboot开发spark-submit的java代码
- Kustomize ConfigMapGenerate自动生成ConfigMap中的坑
- Godot游戏开发实践之二:AI之寻路新方式