最近文章
联系我们
当前位置:主页 > 最近文章 >

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

发布日期:2018-09-14 作者:admin

先了解几个事件对象属性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" > </div> <h3>1,鼠标在div[id=parent1]内部移动时也会触发mouseover事件</h3> <div id="parent1" > <div id="child11" >Child11</div> <div id="child12" >Child12</div> <div ></div> </div> <br/> <h3>2,鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件</h3> <div id="parent2" > <div id="child21" >Child21</div> <div id="child22" >Child22</div> <div ></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需刷新才能执行]

本文源自: 环亚娱乐_最佳网上娱乐平台_环亚集团_搜狐体育

上一篇:functional继承模式 摘自javascript:the good parts
下一篇:Extjs中常用表单介绍与应用