有朋友在群里讨论
mouseenter
和
mouseover
的区别,这个问题不难解释(尽管我也是查了
msdn
才搞清楚,但我觉得这个问题知道在哪里能查到就可以了。把这个问题作为面试题目可能会让人摸不着头脑,因为这不是浏览器兼容性问题)。
首先,
mouseenter
是
IE
自己定义的事件(
Firefox16
已经开始支持该事件,
Chrome
暂不支持)。
其次,触发该事件的条件,
MSDN
上也解释得很清楚。
The event fires
only if the mouse pointer is outside the boundaries of the object and the user
moves the mouse pointer inside the boundaries of the object. If the mouse
pointer is currently inside the boundaries of the object, for the event to
fire, the user must move the mouse pointer outside the boundaries of the object
and then back inside the boundaries of the object.
即从鼠标从元素边界外进入到元素边界内时触发。
第三,同
mouseover
的区别。这点主要体现在元素内部嵌套元素的情况下。当鼠标进入到内部元素时,会触发外部元素的
mouseout
事件,再触发内部元素
mouseover
事件,然后
mouseover
事件冒泡至外部元素再次触发外部元素的
mouseover
事件。如果内部元素足够复杂,最外部元素
mouseover
会出现被多次触发的混乱情况。这种情况归根结底是事件冒泡导致的,而
mouseenter
事件不冒泡,即鼠标在元素内部移动的过程中不会触发
mouseenter
事件,从而解决了使用
mouseover
的问题。
最后,上面讨论的是浏览器的事件,不是
jQuery
定义的
mouseenter
事件,如果有兴趣可以看看
jQuery
如何模拟各种浏览器的
mouseenter
。
分享到:
相关推荐
`mouseenter`和`mouseleave`是两个在IE浏览器中可用,但在其他非IE浏览器中可能不直接支持的事件。本文将详细讲解如何为非IE浏览器添加这些事件,并通过一个示例文件`testpage.html`进行说明。 `mouseenter`和`...
由于`mouseenter`在非IE浏览器中的广泛支持,我们可以通过监听`mouseover`事件并排除子元素来模拟`mouseenter`的行为。以下是一个简单的实现方式: ```javascript function addMouseEnter(element) { element....
先了解几个事件对象属性target 指事件源对象,点击嵌套元素最里层的某元素,该元素就是target。IE6/7/8对应的是srcElement。currentTarget 指添加事件handler的元素本身,如el.addEventListener中el...mouseenter ,m
在JavaScript的事件处理中,`mouseenter` 和 `mouseleave` 是两个非常实用的事件,它们提供了比 `mouseover` 和 `mouseout` 更精确的交互控制。本文将深入探讨这两个事件的特性和区别,以及如何使用 `...
标题“IE应用了filter后mouseover事件异常”涉及的是在Internet Explorer浏览器中,当CSS滤镜(filter)属性被使用后,可能导致鼠标悬停事件(mouseover)处理程序出现不正常行为的问题。这个问题通常与IE浏览器特有...
mouseenter事件只在鼠标指针进入元素内部时触发一次,而mouseleave事件则在鼠标指针离开元素时触发一次。这样就避免了事件冒泡带来的重复触发问题。 2. 在老版本浏览器中,可以使用JavaScript代码来判断事件的目标...
如果需要同时绑定多个事件,可以在事件名称中使用空格分隔,如 `mouseenter mouseleave`。然后在事件处理程序内部,通过检查 `e.type` 来区分不同事件: ```javascript $('#example').on('mouseenter mouseleave', ...
在IE下解决问题很简单,用onMouseEnter、onMouseLeave来代替onMouseOver、onMouseOut就行了,他们的作用基本相同,但前者不会发生冒泡(如果用 jQuery的event事件,只要绑定mouseleave、mouseenter即可)。...
在给定文件的内容中,首先提到了几种常见的鼠标事件:`mouseenter`、`mouseover`、`mouseleave`和`mouseout`。每一种事件在触发时有不同的表现,关键的区别在于它们是否支持冒泡机制: 1. `mouseenter`事件是不支持...
即将原来的mouseover和mouseout事件替换为mouseenter和mouseleave事件。这两个事件虽然在jQuery库中被实现,但它们并不等同于浏览器的原生mouseover和mouseout事件。 mouseenter事件会在鼠标指针进入被选元素的边界...
实验中还提到了使用jQuery库处理鼠标事件的例子,展示了如何通过`mouseenter`事件来更新文本。 总结来说,这个实验旨在帮助学生理解和熟练运用JavaScript事件处理,提升Web交互的用户体验。通过实际操作,学生可以...
- `mouseEnter`函数是一个高阶函数,它接收一个函数作为参数,返回一个新的函数。这个新函数会检查鼠标指针是否真的离开了当前元素(通过检查`relatedTarget`属性)。 - `isAChildOf`函数用于检查一个元素是否是另一...
4. **事件处理**:为了响应用户的交互,如点击、鼠标移动等,我们需要覆盖或添加相应的事件处理函数,如`MouseEnter`, `MouseLeave`, `Click`等。 5. **样式和皮肤**:为了使按钮看起来像IE,可能需要模拟IE的按钮...
10. **事件处理**:WPF控件支持各种事件,如Click、MouseEnter等。开发者可以通过事件处理程序来响应用户的操作,实现交互逻辑。 11. **兼容性和适配**:虽然IE7样式可能只适用于特定的场景或用户群,但开发者需要...
- **mouseleave** / **mouseenter** / **mouseover** / **mouseout**:鼠标进入或离开元素时触发。 - **keydown** / **keypress** / **keyup**:键盘相关事件。 ##### 2.3 事件驱动程序 事件驱动程序是指当特定类型...
在实现过程中,主要涉及到两个关键的jQuery事件:mouseenter和mouseleave。当鼠标进入主菜单项时,触发mouseenter事件,显示对应的子菜单;当鼠标离开主菜单项或子菜单时,触发mouseleave事件,隐藏子菜单。此外,还...