为非IE浏览器添加mouseenter,mouseleave事件的实现代码
2011-06-21 00:59
495 查看
先了解几个事件对象属性
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};
}();
测试代码:
mouseerter与mouseover区别(IE下测试)
1,鼠标在div[id=parent1]内部移动时也会触发mouseover事件
Child11 Child122,鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件
Child21 Child22[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的异同
相关文章推荐
- 为非IE浏览器添加mouseenter,mouseleave事件的实现代码
- 为非IE浏览器添加mouseenter,mouseleave事件
- [网络收集]给radio类型的INPUT添加客户端脚本 --附加实现JS来禁用onClick事件思路代码
- 章鱼哥—VB.NET 如何实现代码自动生成控件 添加绑定事件
- 动态添加js事件实现代码
- Android中RecyclerView的item中控件的点击事件添加删除一行、上移下移一行的代码实现
- 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
- 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
- jquery中利用on绑定mouseenter事件与mouseleave事件实现鼠标hover事件
- Android中RecyclerView的item中控件的点击事件添加删除一行、上移下移一行的代码实现
- epoll模型添加inotify事件的代码实现
- 嵌入式开发之davinci--- 8148/8168/8127 中的添加算饭scd 场景检测 代码实现
- 基于Jqurey的下拉框改变动态添加和删除表格实现代码
- JavaScript 动态添加脚本,并触发回调函数的实现代码
- 基于Jqurey的下拉框改变动态添加和删除表格实现代码
- 阅读layim代码小记,监听事件实现方法
- [Unity3D——用代码说明一切] UGUI:用代码添加事件监听
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- GridView/DataGrid行单击和双击事件实现代码