欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧

程序员文章站 2022-05-25 12:01:47
...
先了解几个事件对象属性

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。
mouseentermouseleave IE9中仍然支持,另见 Greg Reimer 的博文 Goodbye mouseover, hello mouseenter
mouseenter与mouseover区别在于:在元素内部移动时mouseenter不会触发。如下
复制代码 代码如下:





mouseerter与mouseover区别(IE下测试)




1,鼠标在div[id=parent1]内部移动时也会触发mouseover事件



Child11

Child12





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



Child21

Child22







了解了这三个属性的意义后,实现起来就简单了:
复制代码 代码如下:

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需刷新才能执行]