为非IE浏览器添加mouseenter奥门永利误乐域,mouseleave事件的实现代码

先了解几个事件对象属性

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
奥门永利误乐域,mouseleaveIE9中仍然支持,另见
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

Child12

2,鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件

Child21

Child22

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注