为非IE浏览器添加mouseenter,mouseleave事件的实现代码
发布时间:2024-02-23 19:26:11
标签: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 ,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>
0
投稿
猜你喜欢
- 如何使DIV居中,div垂直居中,div水平居中.这个问题在用CSS来设计网页的时候经常会遇到,如果用传统的表格来布局是很简单的,CSS里就
- 本文实例讲述了Python使用chardet判断字符编码的方法。分享给大家供大家参考。具体分析如下:Python中chardet 用来实现字
- 404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。Smashing Magazine为我们挑选了40个有创意的404错误
- 一、安装库首先我们需要安装PIL和pytesseract库。PIL:(Python Imaging Library)是Python平台上的图
- 使用 designer 进行开发首先要知道,使用 Qt designer 和 代码进行 Qt 开发实现页面跳转是不一样的,这里我们使用的是
- 基于Python中求和函数sum的用法详解今天在看《集体编程智慧》这本书的时候,看到一段Python代码,当时是百思不得其解,总觉得是书中排
- 本文实例讲述了Python3.5内置模块之time与datetime模块用法。分享给大家供大家参考,具体如下:1、模块的分类a、标准库(Py
- 1.执行计划简介执行计划是指一条 SQL 语句在经过 MySQL 查询优化器的优化会后,具体的执行方式。MySQL 为我们提供了  
- 1.文件结构MySQLdb和pymysql的使用差不多阅读的小伙伴可以自己尝试实现2.实验效果3.主文件:main.pyimport MyS
- 一、基本使用selenium 的基本使用步骤:打开浏览器;获取浏览器页面的特定内容;控制浏览器页面上的控件,如向一个文本框中输入一个字符串;
- 本文实例讲述了Python数学形态学。分享给大家供大家参考,具体如下:一 原始随机图像1、代码import numpy as npimpor
- 如果进入了shell交互窗口,python的退出方式只能够用函数不能够用命令,这有时候让人感觉到很不习惯。因为函数会比命令多一个括号的输入,
- 本文介绍基于Python中ArcPy模块,对大量栅格遥感影像文件进行批量掩膜与批量重采样的操作。首先,我们来明确一下本文的具体需求。现有一个
- 创建项目scrapy startproject zhaoping创建爬虫cd zhaopingscrapy genspider hr zha
- 本文实例讲述了Django框架ORM数据库操作。分享给大家供大家参考,具体如下:测试数据:BookInfo表PeopleInfo表一.增加1
- 本方法只做学习研究之用,不得用于商业用途若经济条件允许,请支持并购买正版,链接地址:https://www.jetbrains.com/py
- 使用MySQLdb连接数据库执行sql语句时,有以下几种传递参数的方法。1.不传递参数conn = MySQLdb.connect(user
- 超如果你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比如:Apache,ISS等。那么, Pyth
- 1. 引言在某些场景下,我们不仅需要进行实时人脸检测追踪,还要进行再加工;这里进行摄像头实时人脸检测,并对于实时检测的人脸进行初步提取;单个
- mysql select into给多个字段变量赋值在into之后顺序写上要赋值的变量就行SELECT