为非IE浏览器添加mouseenter,mouseleave事件的实现代码
更新时间：2011年06月21日 00:59:19 作者：
为非IE浏览器添加mouseenter,mouseleave事件的实现代码,学习js的朋友可以参考下。
先了解几个事件对象属性
target 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。
currentTarget 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/7/8没有对应属性，可在handler内使用this来替代如evt.currentTarget = this。
relativeTarget 指事件相关的元素，一般用在mouseover，mouseout事件中。IE6/7/8中对应的是fromElement，toElement。
mouseenter ，mouseleave IE9中仍然支持，另见 Greg Reimer 的博文 Goodbye mouseover, hello mouseenter 。
mouseenter与mouseover区别在于：在元素内部移动时mouseenter不会触发。如下
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mouseerter与mouseover区别(IE下测试)</title>
</head>
<body>
<div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;">
</div>
<h3>1，鼠标在div[id=parent1]内部移动时也会触发mouseover事件</h3>
<div id="parent1" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div>
<div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div>
<div style="clear:both;"></div>
</div>
<br/>
<h3>2，鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件</h3>
<div id="parent2" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div>
<div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
function on(el,type,fn){
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
}
function $(id){
return document.getElementById(id);
}
var p1 = $('parent1'),
p2 = $('parent2');
function fn(e){
var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);
}
on(p1,'mouseover',fn);
on(p2,'mouseenter',fn);
</script>
<body>
</html>
了解了这三个属性的意义后，实现起来就简单了：
复制代码 代码如下:
E = function(){
function elContains(a, b){
try{
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}catch(e){}
}
function addEvt(el, type, fn){
function fun(e){
var a = e.currentTarget, b = e.relatedTarget;
if(!elContains(a, b) && a!=b){
fn.call(e.currentTarget,e);
}
}
if(el.addEventListener){
if(type=='mouseenter'){
el.addEventListener('mouseover', fun, false);
}else if(type=='mouseleave'){
el.addEventListener('mouseout', fun, false);
}else{
el.addEventListener(type, fn, false);
}
}else{
el.attachEvent('on' + type, fn);
}
}
return {addEvt:addEvt};
}();
测试代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:
- 浅谈JQ中mouseover和mouseenter的区别
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
- 快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
- Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
- 跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
- javascript 兼容FF的onmouseenter和onmouseleave的代码
- javascript中mouseenter与mouseover的异同
相关文章
这篇文章主要为大家详细介绍了js Dom实现换肤效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
js 数组 find,some,filter,reduce区别详解
区分清楚Array中filter、find、some、reduce这几个方法的区别，根据它们的使用场景更好的应用在日常编码中。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了利用JavaScript的Map提升性能的方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
下面小编就为大家带来一篇js学习心得_一个简单的动画库封装tween.js。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了js 递归json树实现根据子id查父id的方法,结合实例形式分析了JavaScript递归遍历json进行数据查询的相关操作技巧,需要的朋友可以参考下2019-11-11
常用的改变鼠标样式的方法：如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)2014-03-03
大家在日常开发的时候经常要用到日期格式的处理，下面这篇文章主要给大家介绍了js中常规日期格式处理、月历渲染及倒计时函数,有需要的朋友可以参考借鉴，下面来一起看看吧。2016-12-12
本文给大家汇总分享了几种使用javascript实现判断图片路径是否存在的代码，都是平时项目中用到过的，这里总结一下，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了小程序中设置缓存过期的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论