今天在帮别人解决一个关于mouseover和mouseout问题的时候发现了一个原来没想到的问题，斗胆share下，高手莫喷。。
问题：有嵌套的三层div。div111最外层，div222中间层，div333最内层。
效果：当鼠标位于div的上方时，相应层的mouseover触发，当属性从div的上方离开时，相应层的mouseout触发。
此段代码同时也解决了mouseover和mouseout由于子元素的冒泡而产生的一些问题。不知道有没更好的方案？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
#div111{
width:200px; height :200px ; background :red; margin :100px auto auto 100px; border: 2px solid white;
}
#div222{
width:100px; height :100px; background :yellow; border: 2px solid white;
}
#div333{
width:50px; height :50px; background :blue; border: 2px solid white;
}
</style>
</head>
<body>
<div id="div111">
<div id="div222">
<div id="div333"></div>
</div>
</div>
<div id="log"></div>
<script type ="text/javascript" >
function mouse_over(event){
var elem = $(event.currentTarget),
fromElem = $(event.relatedTarget);
if(elem.has(fromElem).length === 0 || !fromElem.is(elem)){
elem.css('border-color', 'green');
log(elem.attr('id'), event.type);
}
};
function mouse_out(event){
var elem = $(event.currentTarget),
toElem = $(event.relatedTarget);
if(elem.has(toElem).length === 0 || !toElem.is(elem)){
elem.css('border-color', 'white');
log(elem.attr('id'), event.type);
}
};
function log(id, type){
$("#log").append("<div><span>" + id + "触发了<strong><font color='red'>" + type + "</font></strong>事件</span></div>");
}
$('#div111').mouseover(mouse_over);
$('#div222').mouseover(mouse_over);
$('#div333').mouseover(mouse_over);
$('#div111').mouseout(mouse_out);
$('#div222').mouseout(mouse_out);
$('#div333').mouseout(mouse_out);
</script>
</body>
</html>
分享到：
相关推荐
总结来说，当面临因嵌套元素导致的 `mouseover` 和 `mouseout` 事件频繁触发的问题时，可以考虑使用jQuery的 `mouseenter` 和 `mouseleave` 或 `hover()` 方法来优化代码，提高用户体验。同时，为了确保在边界情况下...
举个例子，当一个父元素内嵌套有多个子元素时，鼠标在子元素间移动会引发多次mouseover和mouseout事件，这在多数情况下并不是我们期望的。而hover事件因为使用了mouseenter和mouseleave，所以在这种场景下能更精确地...
标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先，我们需要了解`mouseover`和`mouseout`事件的工作原理...
`mouseover`, `mouseout`, `mouseenter`, 和 `mouseleave` 是四个常见的鼠标事件，它们都与鼠标的移动有关，但触发条件有所不同。理解这些事件的区别对于编写无闪烁、响应良好的用户界面至关重要。 1. `mouseover` ...
简单的鼠标移动事件： 进入 代码如下: mouseenter：不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素，都会...给一个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不一样 代码如下: <!DOC
先了解几个事件对象属性target 指事件源对象，点击嵌套元素最里层的某元素，该元素...relativeTarget 指事件相关的元素，一般用在mouseover，mouseout事件中。IE6/7/8中对应的是fromElement，toElement。mouseenter ，m
3. **JavaScript事件监听**：使用JavaScript的addEventListener方法，监听每个菜单项的mouseover和mouseout事件。当鼠标进入某个菜单项时，触发mouseover事件，高亮该菜单项；当鼠标离开时，触发mouseout事件，恢复...
在jQuery中，hover()是一个组合函数，它同时处理mouseover和mouseout事件。当你将鼠标悬停在某个元素上时，会触发mouseover事件；当鼠标离开该元素时，会触发mouseout事件。hover()函数接受两个函数参数，第一个函数...
这两个事件与原生JavaScript中的`mouseover`和`mouseout`有所不同，它们不会因为元素内部子元素的鼠标移动而触发。`mouseenter` 在鼠标进入元素边界时触发，而 `mouseleave` 在鼠标离开元素边界时触发。这对于处理...
同时，`mouseenter`和`mouseleave`事件相比传统的`mouseover`和`mouseout`更适合处理子元素嵌套的情况，可以避免因鼠标移入子菜单导致的意外关闭。 总结来说，这个压缩包中的示例展示了如何使用HTML5、CSS和jQuery...
例如，通过监听`mouseover`和`mouseout`事件，我们可以实现二级菜单的展开和收起。 下面是一个简单的二级下拉菜单的JS和CSS实现步骤： 1. **HTML 结构**： 创建一个包含一级菜单项的`<ul>`，每个菜单项内嵌套另一...
这里的`click`可以替换为其他类型的事件，如`mouseover`、`mouseout`、`keydown`等。`function()`内部定义了当事件触发时执行的代码。这个方法允许我们为单个或多个元素绑定一个或多个事件。 2. **事件冒泡（Event ...
4. **JavaScript事件处理**：在`js`文件中，会定义事件监听器，如`mouseover`和`mouseout`事件。当鼠标进入（`mouseover`）菜单项时，显示对应的子菜单；当鼠标离开（`mouseout`）时，隐藏子菜单。这可以通过修改子...
`mouseover`和`mouseout`事件就是这样一种会冒泡的事件，这可能在某些场景下导致问题，例如元素内部嵌套其他元素时，可能会在鼠标移动过程中无意触发外层元素的事件。 为了解决Firefox中`onmouseenter`和`...
`mouseover`事件在鼠标进入某个元素时触发，而`mouseout`事件在鼠标离开时触发。通过绑定这些事件，我们可以控制菜单的展开和收起。具体实现可能包括以下步骤： 1. 首先，我们需要获取所有菜单项，可以通过类选择器...
这可以通过绑定`mouseover`和`mouseout`事件来实现。`mouseover`事件会在鼠标指针进入某个元素时触发，而`mouseout`则在鼠标离开时触发。我们可以使用`.hover()`方法来同时设置这两个事件，例如： ```javascript $...
而鼠标感应事件，主要是指鼠标指针移动到元素上方时（mouseover事件）和鼠标指针离开元素时（mouseout事件）。通过这些事件，我们可以感知鼠标的位置变化并作出相应的反馈。jQuery中的`.hover()`方法就是一个结合了...