JavaScript
搜索
分类

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

时间：2024-02-23 19:26:11　

先了解几个事件对象属性

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};
}();


测试代码:

<!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>  <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>


 

标签：mouseenter,mouseleave
0
投稿

猜你喜欢

  • Python实现监控内存使用情况和代码执行时间

    2023-05-02 15:42:02

  • Python 炫技操作之合并字典的七种方法

    2022-07-16 05:56:12

  • Golang指针的操作以及常用的指针函数

    2024-02-08 11:46:49

  • asp如何设定程序的执行次数？

    2010-05-18 18:31:00

  • python实现批量获取指定文件夹下的所有文件的厂商信息

    2021-12-14 20:42:27

  • HTML和CSS中的视觉语义

    2010-07-09 13:08:00

  • 解析Go语言编程中的struct结构

    2024-04-25 13:21:11

  • python光学仿真通过菲涅耳公式实现波动模型

    2022-10-25 06:08:19

  • 在Django中使用ElasticSearch

    2022-11-18 11:01:22

  • 跟老齐学Python之啰嗦的除法

    2022-12-18 12:47:38

  • ASP.NET 2.0中Gridview控件高级技巧图文教程

    2007-08-07 15:46:00

  • 详解如何让页面与 iframe 进行通信

    2024-04-19 09:42:44

  • 使用pyecharts1.7进行简单的可视化大全

    2022-02-13 05:02:33

  • python超时重新请求解决方案

    2022-04-22 00:16:12

  • Python异常处理与反射相关问题总结

    2022-02-09 18:20:32

  • 详解Django模板层过滤器和继承的问题

    2023-02-08 06:28:04

  • python 使用tkinter+you-get实现视频下载器

    2023-08-15 18:40:25

  • Python3内置模块之base64编解码方法详解

    2021-04-01 15:45:24

  • 关于Python的GPU编程实例近邻表计算的讲解

    2022-08-06 22:35:37

  • python使用arcpy.mapping模块批量出图

    2021-03-12 04:28:15
    • asp之家 网络编程 m.aspxhome.com