`
xichao007521
  • 浏览: 43505 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

关于mouseout和mouseover等等类似事件的冒泡问题

阅读更多

最近写点东西,比较闹心,一个弹出层,上边有其他元素,本意是鼠标离开弹出层时,执行一些动作,但在实际应用中,鼠标离开弹出层中的元素时,也会激活这些动作。试了各浏览器的停止事件冒泡的方法,均无效。

还是咱们javaeye里高人众多,在一个哥们博客中发现了如下代码:

 

	 function isMouseLeaveOrEnter(e, handler) {    
      	 if (e.type != 'mouseout' && e.type != 'mouseover') return false;    
       	 var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;    
       	 while (reltg && reltg != handler)    
            reltg = reltg.parentNode;    
       	 return (reltg != handler);    
  	  } 

 这个方法是判断,当前元素是不是要执行mouseout事件的元素,这样就可以避免上述问题。

分享到:
评论

相关推荐

    基于mouseout和mouseover等类似事件的冒泡问题解决方法

    在本文中,我们将深入探讨`mouseout`和`mouseover`事件以及它们与事件冒泡相关的常见问题,同时提供一种有效的解决方案。 `mouseout`和`mouseover`事件是两种常用的DOM(文档对象模型)事件,用于追踪用户鼠标在...

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

    针对标题“JS中mouseover和mouseout多次触发问题如何解决”,主要内容探讨的是在JavaScript中使用jQuery库时,处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时,这些...

    javascript中mouseover、mouseout使用详解

    以上方法可以有效解决在不同的浏览器环境下处理mouseover和mouseout事件时出现的兼容性问题和事件冒泡的问题。不过需要注意的是,实际应用中需要根据目标浏览器的版本和特性选择合适的解决方案。随着浏览器技术的...

    javascript mouseover、mouseout停止事件冒泡的解决方案

    为了解决跨浏览器的`mouseover`和`mouseout`事件冒泡问题,开发者们采用了各种方法。例如,可以利用W3C标准中的`relatedTarget`属性来获取与事件相关的元素。`relatedTarget`属性在`mouseover`事件触发时指向鼠标...

    鼠标经过子元素触发mouseout,mouseover事件的解决方案

    这两个事件与`mouseover`和`mouseout`类似,但它们不会受子元素的影响。`mouseenter`仅在鼠标首次进入元素时触发,而`mouseleave`则在鼠标离开元素自身时触发,不会因为子元素而被反复触发。因此,使用`mouseenter`...

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

    简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会...给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样 代码如下: <!DOC

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

    在使用jQuery进行Web开发时,我们常常会用到鼠标事件来增强用户交互...而当需要事件冒泡行为时,可以继续使用mouseover和mouseout,并适当使用event.stopPropagation()来控制事件冒泡的范围,以达到预期的交互效果。

    js下关于onmouseout、事件冒泡的问题经验小结.docx

    ### JavaScript 下关于 `onmouseout` 与事件冒泡的问题经验小结 #### 一、引言 在前端开发过程中,事件处理是不可或缺的一部分。其中,`onmouseout` 事件和事件冒泡机制尤为关键,它们涉及到用户交互以及页面元素...

    javascript中mouseenter与mouseover的异同

    不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...

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

    然而,当这些事件被绑定到一个包含子元素的父元素上时,问题就出现了:当鼠标在子元素之间移动时,会连续触发 `mouseover` 和 `mouseout` 事件,这被称为事件冒泡或捕获。这种行为可能会导致不必要的处理,甚至在...

    jquery图片冒泡提示效果

    该效果的核心在于利用jQuery的事件处理机制(如mouseover和mouseout)以及DOM操作方法来创建和控制提示框。首先,我们需要在HTML结构中为每张图片设置相应的数据属性,用来存储提示信息。例如: ```html 这是图片的...

    jquery图片冒泡提示效果.rar

    3. JavaScript文件:使用jQuery实现的脚本,包含图片冒泡提示的逻辑,可能包括事件监听器(如mouseover和mouseout)和动画效果。 4. 图片资源:用于演示效果的图片文件。 5. 可能还有其他支持文件,如字体或图标。 ...

    JavaScript每天必学之事件

    文中也提供了一个示例代码,演示了如何在ul元素上使用事件委托来处理li子元素的鼠标进入(mouseover)和鼠标离开(mouseout)事件。通过判断事件的目标节点(event.target)是否是li元素,来决定是否要改变背景色。 ...

    jQuery事件之鼠标事件

    - **定义**:这两个事件与`mouseover`和`mouseout`类似,但是它们不冒泡到父级元素。 - **示例**: ```javascript $('p').mouseenter(function(){ alert('mouseenter function is running!'); }).mouseleave...

    js事件设计

    - 用户交互:`click`(点击)、`mouseover`(鼠标悬停)、`mouseout`(鼠标离开)、`keydown`(按键按下)、`keyup`(按键释放)等。 - 文档加载:`load`(页面或图像加载完成)、`unload`(页面卸载)。 - 窗口和...

    使用JavaScript事件综合查询,js事件大全

    1. 用户交互事件:click(点击)、mouseover(鼠标悬停)、mouseout(鼠标离开)、mousedown(鼠标按键按下)、mouseup(鼠标按键释放)等。 2. 键盘事件:keydown(键盘按键按下)、keyup(键盘按键释放)和...

Global site tag (gtag.js) - Google Analytics