先了解几个事件对象属性
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};
}();
分享到：
相关推荐
为了在非IE浏览器中实现`mouseenter`和`mouseleave`事件，可以采用事件委托的方式，即在一个共同的父元素上监听事件，并根据`target`和`currentTarget`属性来判断事件是从哪个子元素触发的。此外，也可以通过比较...
由于mouseenter和mouseleave在非IE浏览器中不被支持，我们需要使用mouseover和mouseout来模拟这些事件，并通过compareDocumentPosition方法判断鼠标是否在目标元素内。在非IE浏览器中，compareDocumentPosition是一...
`onmouseenter`和`onmouseleave`是IE浏览器最初支持的事件，它们帮助开发者处理了鼠标事件不冒泡的情况，从而更精确地控制事件的触发。在标签中提及的`firefox onmouseenter`表明了需要对Firefox浏览器进行兼容性...
这些事件由IE浏览器首先提出，而后被最新版本的其他主流浏览器支持。mouseenter事件只在鼠标指针进入元素内部时触发一次，而mouseleave事件则在鼠标指针离开元素时触发一次。这样就避免了事件冒泡带来的重复触发问题...
但在非IE浏览器（如Firefox、Chrome等）中，并没有直接对应的事件，需要通过其他方式来实现类似功能。 一种解决方案是利用W3C标准中的 `relatedTarget` 属性。`relatedTarget` 在 `mouseout` 事件中表示鼠标离开的...
使用jQuery的选择器找到图片元素，然后绑定`mouseenter`和`mouseleave`事件。`mouseenter`事件会在鼠标进入元素时触发，`mouseleave`事件则在鼠标离开时触发。这样可以确保在用户将鼠标移开时恢复原始状态。 3. **...
在早期版本中，Silverlight通过ActiveX控制来实现在IE浏览器中的集成。然而，随着技术的发展，HTML5的兴起，以及对跨平台支持的需求增加，ActiveX控制的使用逐渐减少。尽管如此，对于某些遗留系统或特定场景，了解...
5. **浏览器兼容性**：jQuery库本身已经做了良好的跨浏览器兼容处理，但在旧版本的IE浏览器中可能存在问题。确保你的jQuery版本是现代的，并且在项目中考虑使用如Modernizr这样的工具检测浏览器特性，以进行必要的...
这样的修改可以解决IE浏览器中的hover事件触发导致的菜单闪烁问题，提升了用户的交互体验。 此外，这种方法的实施也向我们展示了在进行Web开发时，选择合适事件的重要性。不同的事件有着不同的触发条件和行为特点，...
同时，考虑到不同设备和浏览器的兼容性，确保代码在主流浏览器中都能正常工作，可能需要对旧版本的IE浏览器进行额外的兼容性处理。 总之，“jQuery鼠标悬停导航下划线滑出效果”是一个简单而有效的增强网站导航体验...
例如，为页面加载后和窗口滚动事件添加回调函数： ```javascript $(document).ready(function() { // 页面加载后的初始处理 initImageWall(); // 滚动事件处理 $(window).scroll(function() { ...
3. **jQuery选择器**：使用jQuery选择器找到所有的标题元素，然后为它们绑定`mouseenter`和`mouseleave`事件。这两个事件分别在鼠标进入和离开元素时触发。 4. **事件处理**：在事件处理函数中，我们根据当前元素的...
首先，我们需要监听`mouseenter`和`mouseleave`事件，然后根据事件触发相应的滑动动画。 2. **左右切换效果**： 左右切换效果常见于水平导航菜单，尤其是当菜单项过多，无法在一行内完全显示时。我们可以使用`...
$('#vertical-nav > li').on('mouseenter mouseleave', function(e) { var $this = $(this); if (e.type === 'mouseenter') { $this.find('.subnav').stop().slideDown(300); // 悬停时下拉二级菜单 } else { ...
可能需要对旧版本的IE浏览器进行特殊处理，并考虑触摸设备的交互方式。 以上就是使用jQuery实现右侧水平弹出菜单的基本过程。实际项目中，你可能还需要结合响应式设计，使菜单在不同屏幕尺寸下都能良好显示。同时，...
3. **jQuery事件绑定**：使用jQuery的`mouseenter`和`mouseleave`事件监听用户鼠标进入和离开缩略图的行为。当鼠标悬停在缩略图上时，修改大图的transform属性，使大图缩放；当鼠标离开时，恢复原始大小。 4. **...