`
trarck
  • 浏览: 28721 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mouseover陷阱

    博客分类:
  • js
阅读更多
说明:在给元素绑定事件时,允许事件冒泡,而ie是不法指定是否冒泡。
当我们给一个html元素绑定一个mouseover事件时,如果该元素有子元素,且子元素和该元素之间有空隙,当鼠标从该元素经过时,mouseover会触发多次。
首先,鼠标多外面到元素上,但未经过子元素,正好处在元素及子元素的空隙之间,触发元素的mouseover事件。
然后,鼠标继续移动,由元素进入子元素,此时会触发子元素的mouseover事件,由于事件的会向上冒泡,触发mouse结束事件。
最后,鼠标继续移动,由子元素进入元素,此时又会触发元素的mouseover事件。
所以,当我们给元素绑定mouseover事件传时,通常会触发三次。在做一些效果时会发生抖或闪的现像。
有的浏览器定义了另外的事件mouseenter,但并不是所有浏览器都支持。
注意到mouseenter事件是鼠标在元素之外时,经过元素时才触发,从元素到子元素没有反应。
只要在mouseover事件中判断触发事件时候,相关元素(relatedTarget或fromElement)是元素或在元素内(元素是否是触发元素的祖先),不在则是mouseenter,若是则已经进入过,无需触发。
以上讲的同样适用mouseleave,只是相关元素是触发元素或在其定才执行mouseout事件,既mouseleave。
jquery已经实现好了,如果浏览器支持mouseenter,mouseleave事件直接使用,否则用mouseover,mouseout模拟。
分享到:
评论

相关推荐

    JavaScript的9个陷阱及评点

    **陷阱**:在不同的浏览器中,`mouseout` 和 `mouseover` 的行为可能不一致。为了确保跨浏览器的一致性,建议使用现代的库如 YUI 或 jQuery 来处理这些事件。 #### 6. parseInt() 方法陷阱 `parseInt()` 方法用于...

    在Unity中使用C#脚本编写的教程

    ### 使用SendMessage和SendMessageUpwards的陷阱 另一种尝试解决此问题的方法是使用`SendMessage`或`SendMessageUpwards`方法。这些方法允许你向同一游戏对象或其父级对象发送消息,但它们存在明显的局限性和缺点。...

    《锋利的jQuery》+源码

    书中会讲解如何使用`.click()`, `.mouseover()`, `.keydown()`等事件处理函数。 3. **动画效果**:jQuery的动画功能是其一大亮点,`.fadeIn()`, `.slideToggle()`, `.animate()`等方法使得创建平滑的过渡效果...

    Head First jQuery 英文版 PDF

    4. **事件处理**:理解事件绑定和解绑,使用`.click()`, `.mouseover()`, `.keydown()`等事件处理函数,以及事件冒泡和事件委托。 5. **CSS操作**:应用jQuery修改元素的样式,如改变颜色、大小、位置等,使用`.css...

    《锋利的jQuery》(高清扫描版-有书签)

    3. **事件处理**:介绍了jQuery对事件处理的支持,如.click()、.mouseover()等,以及如何使用.delegate()和.on()方法进行事件委托,提高性能。 4. **特效与动画**:讲解了jQuery实现动态效果和动画的各种方法,如....

    精通JavaScript

    理解事件监听、触发和事件对象,如click、mouseover、keydown等事件的响应。 4. **AJAX**:异步JavaScript和XML,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。了解XMLHttpRequest对象的使用...

    js 权威指南 js快速查找手册

    此外,"标签"中的"js指南"意味着这些资料可能包含JavaScript的最佳实践、编码规范以及常见问题的解答,帮助开发者避免陷阱,提升代码质量。 虽然"新建文件夹"没有给出具体的文件信息,但通常在这样的资源包中,可能...

    垃圾代码三锐

    同时,分析和重构这样的代码也是一个提升编程技能的好方法,可以帮助你识别并避免类似的编程陷阱。 从提供的压缩包文件名"三锐安装"来看,里面可能包含了该项目的安装或部署说明。在研究下拉层实现的过程中,了解...

    JQuery权威指南---完整版

    2. **事件处理**:JQuery提供了丰富的事件处理函数,如`click()`, `mouseover()`, `mouseout()`等,使开发者能够轻松响应用户的交互行为。同时,还会有事件冒泡与事件委托的讲解,这对于优化性能和处理复杂交互场景...

    保证三天就能学会Jquery(包括若干个实例和参考手册)

    5. **事件处理**:掌握`$(selector).click()`, `$(selector).mouseover()`等事件绑定方法,以及`.on()`的使用,实现事件监听。 第二天:jQuery进阶 1. **链式操作**:理解jQuery对象的链式调用原理,提高代码...

    Chapter5(jquery).zip

    3. **事件处理**:jQuery的一致事件处理接口使得绑定和解绑事件变得非常直观,例如`$(element).click(function() {...})`用于绑定点击事件,`$(element).on("mouseover", function() {...})`则用于绑定鼠标悬停事件...

    Pro Ajax and Java.pdf

    - **避免常见的陷阱**:为了避免开发者在实现Ajax时遇到的问题,书中还列举了一些常见的错误及其解决方案。 - **Ajax模式**:书中介绍了一些常用的Ajax模式,如Fade Anything Technique (FAT)、Auto Refresh、...

    jquery源码详解

    它支持多种事件类型,如 `click`, `mouseover`, `mouseout` 等,并提供了一种简洁的方式来绑定和解绑事件。 - **事件绑定**:使用 `on` 方法来绑定事件处理函数。 - **事件委托**:利用事件冒泡的机制,可以在父...

    关于vue3默认把所有onSomething当作v-on事件绑定的思考

    在 Vue2 中,我们通常使用 `v-on` 指令来监听并处理组件内部或外部元素的事件,如 `@click` 或 `@mouseover`。而在 Vue3 中,如果在组件定义中未声明以 `on` 开头的 props,它们将被视为事件处理器,并绑定到组件的...

Global site tag (gtag.js) - Google Analytics