`
davidxiaozhi
  • 浏览: 241466 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery中的mouseenter和mouseleave事件

阅读更多

大家知道事件的冒泡特性,对于mouseover事件来说 ,当鼠标从其他元素 移动到 child节点时发生,但此事件会冒泡 所以会导致 parent 也触发mouseover。如果我们对 parent注册了 mouseover监听,从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。

对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件,这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件。

对于 mouseout 和mouseleave 也是如此 当鼠标从child 移出时 mouseout同样会冒泡到 parent 从而触发parent的 mouseout 二mouseleave 同样无此问题。


Ie 中的mouseenter和mouseleave 在进行特殊处理的时候很好用,jQuery 发现了这一点对其进行封装达到跨浏览器的效果。

 

分享到:
评论

相关推荐

    Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    2. 如何利用Jquery的事件绑定功能来处理mouseenter和mouseleave事件。 3. 如何使用Jquery的CSS方法来控制弹出层的显示和隐藏。 4. 如何通过Jquery选择器定位弹出层,并修改其样式,如位置和显示状态。 5. Jquery中...

    JS中mouseover和mouseout多次触发问题如何解决

    5. jQuery中处理事件的方法:jQuery提供了一系列便捷的方法来绑定和解绑事件处理器,其中$.fn.mouseenter()和$.fnmouseleave()便是其中之二。这些方法简化了事件处理过程,使得开发者能够更加直观和高效地控制事件...

    jquery中的mouseleave和mouseout的区别 模仿下拉框效果

    1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 代码如下: ”sel_box”> <input type=”button” value=”请选择所属部门” ...

    jquery中mouse时件

    首先,jQuery提供了多种与鼠标相关的事件,如`click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`等。这些事件对应着不同的鼠标行为: 1. `click`:当鼠标点击元素并释放时触发...

    跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

    在JavaScript的事件处理中,`mouseenter` 和 `mouseleave` 是两个非常实用的事件,它们提供了比 `mouseover` 和 `mouseout` 更精确的交互控制。本文将深入探讨这两个事件的特性和区别,以及如何使用 `...

    实例讲解jquery中mouseleave和mouseout的区别

    为了解决这些问题,jQuery引入了mouseenter和mouseleave两个新的事件,它们与mouseout事件有很大区别,这一点非常重要,尤其是当我们希望精确控制鼠标事件行为时。 让我们来详细区分一下mouseleave和mouseout事件:...

    经过绑定元素时会多次触发mouseover和mouseout事件

    jQuery 为了解决这个问题,提供了两个新的事件:`mouseenter` 和 `mouseleave`。这两个事件与 `mouseover` 和 `mouseout` 相似,但它们不会因为子元素的存在而触发。`mouseenter` 只会在鼠标首次进入元素(包括其...

    jQuery事件之鼠标事件

    - **定义**:`hover`方法实际上是对`mouseenter`和`mouseleave`事件的一个封装,使得代码更加简洁。 - **示例**: ```javascript $('p').hover(function(){ alert('mouseenter function is running!'); }, ...

    关于Jquery的鼠标悬停事件

    首先,我们要知道jQuery提供了两个主要的鼠标悬停事件:`mouseenter` 和 `mouseleave`。这两个事件与原生JavaScript中的`mouseover`和`mouseout`有所不同,它们不会因为元素内部子元素的鼠标移动而触发。`mouseenter...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,...

    jquery语言下拉菜单--(解决滑动菜单晃动问题)

    3. **使用mouseenter和mouseleave**:代替hover,我们可以使用mouseenter和mouseleave事件。这两个事件在鼠标进入和离开元素时只会触发一次,减少了晃动的可能性。 4. **添加缓冲区**:在CSS中,为菜单项和子菜单...

    jQuery用unbind方法去掉hover事件及其他方法介绍

    这种做法避免了对DOM标准事件和非标准事件混淆不清的情况,而且可以确保无论在哪个版本的jQuery中都能稳定工作。解绑事件是一个重要的概念,因为如果不正确地解绑事件,可能会导致内存泄漏,因为旧的事件处理器仍会...

    jQuery表格插件wholly.zip

    wholly 是一款 jQuery 表格插件,用于响应的 mouseenter 和 mouseleave 事件,选择整个表格的行和列,支持利用列跨度和行跨度的表格布局。 标签:wholly

    jQuery中hover与mouseover和mouseout的区别分析

    在jQuery中,hover方法的内部实现实际上是使用了mouseenter和mouseleave方法,这一点在jQuery的源码中可以找到如下定义: ```javascript hover: function(fnOver, fnOut) { return this.mouseenter(fnOver)....

    jquery中取消和绑定hover事件的实现代码

    jQuery通过`.hover()`方法提供了一种简便的方式来处理`mouseenter`和`mouseleave`事件。 正确的绑定`hover`事件的方法是使用`.hover()`方法,它接受两个函数作为参数,分别对应`mouseenter`和`mouseleave`事件: `...

    jquery鼠标事件的小例子

    总之,学习jQuery的鼠标事件和如何与CSS结合是Web开发中的重要步骤,它能让你构建更加动态和吸引人的网页应用。通过实践这些小例子,初学者可以快速掌握这一核心技能,并为进一步的学习打下坚实基础。

    详解jQuery事件

    如果需要同时绑定多个事件,可以在事件名称中使用空格分隔,如 `mouseenter mouseleave`。然后在事件处理程序内部,通过检查 `e.type` 来区分不同事件: ```javascript $('#example').on('mouseenter mouseleave', ...

    jQuery实现的产品图片滚动及局部放大展示.zip

    这可以通过jQuery的鼠标事件(如mouseenter和mouseleave)以及CSS3的transform属性来实现。开发者可以创建一个浮层,用于放置放大的图片,当鼠标进入图片区域时,浮层显示并调整图片的大小,鼠标离开时,浮层隐藏。 ...

Global site tag (gtag.js) - Google Analytics