为非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
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);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
javascript中mouseenter与mouseover的异同
不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰.自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来,一直也对这两个事件有点模糊不清,趁着最近正在读 zepto源码 ,准备写一篇这方面的文章,如果有错误,请大家指正. mouseenter与mouseover的异同? 要说清楚mouseenter与mouseover有什么不同,也许可
-
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
写了这么久 js应用 我居然不知道这两个事件 于是 去google搜索了一番. 才发现这两个事件 是如此的优秀 且好用... 但搜索过程中 发现 好多人 似乎不太明白这两个事件 和mouseover mouseout 真正的区别 和用途.. 并且看到google中搜索得到的 一些朋友 实现的 跨浏览器 解决方案. 觉得似乎有些繁琐...所以产生了写一篇blog 把这玩意 说透彻的冲动... 好啦.我们进入正题. 对于 mouseover 和mouseenter 两个事件 最大的区别就是 mou
-
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave. 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. 注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元
-
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部按钮调用ECharts图表的保存为图片操作 最近使用ECharts库绘制图表,依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致.然后上网找了一些方法,看了看也没遇到一个可以满意的.后来,突然想到了echart开放了源码,可以看看源码,找
-
浅谈JQ中mouseover和mouseenter的区别
mouseenter事件只会触发一次,触发对象是注册对象或者注册对象的子元素 mouseover事件可以触发多次,触发对象是注册对象或者注册对象的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>
-
javascript 兼容FF的onmouseenter和onmouseleave的代码
IE下有 onmouseenter和onmouseleave来解决. 可惜ff就没有. 我再想 , 为什么这么好的功能,为什么ff不引用呢? 还有ie中的onpropertychange ,哎,ff中都没有... 对比例子中引入了一段js ,来兼容FF的onmouseenter和onmouseleave. : 复制代码 代码如下: var xb = { evtHash: [], ieGetUniqueID: function(_elem) { if (_ele
-
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title> <script src="JS/jquery-1.9.1.js" type="text/javascript"></
-
为非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,mouseo
-
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="
-
Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解
目录 前言 图片说明 功能实现 这里需要注意一点 mouseover 和 mouseenter 的区别 总结 前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果,问了一下我的组长-豪哥 他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决 本着这个思路,我去寻求答案,
-
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************
-
jQuery常用事件方法mouseenter+mouseleave+hover
jQuery常用事件方法: jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数 mouseenter()方法:鼠标进入一个元素触发的事件 mouseleave()方法:鼠标离开一个元素触发的事件 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适 下面是代码对比: <div class="parent"> <div class=&qu
-
js ie非ie浏览器的几种判断方法小结
最近在 司徒正美js 全世界最短的IE浏览器判断代码 一文,看到只有6byte的判断ie与非ie的方法.其代码如下: if(!+[1,])alert("这是ie浏览器"); else alert("这不是ie浏览器"); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 其实有很多判断的方法,大都是根据浏览器的特性来的. 比如库prototype的方法是:!!(window.attachEvent && navigator.userAgen
-
vue动态渲染svg、添加点击事件的实现
业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed.img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id="svgTemplate"></div> </div>
-
asp.net(C#)中给控件添加客户端js事件的方法
放在服务器端,也可以用ajax来实现,不刷页面.但我觉得有更直接更简单方法,用一个js事件是可以实现的. 但,DropDownList不偈Button等控件提供了一些像"OnClientClick"前台事件,只有服务端事件. 想到,所有C#页面代码,最终都是生成HTML,js事件也是最终运在浏览器中,以Html为基础的.服务端控件最终生成的HTML控件有什么js事件,我们应该就能在aspx中给它添加相应的事件. DropDownList 生成的Htm是元素<Select>是