基于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事件的元素，这样就可以避免上述问题。

赞 (0)

相关推荐

  • onmouseover和onmouseout的一些问题思考

    onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

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

    在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事. 虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的. 想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案: 复制代码 代码如下: function isMouseLeaveOrEnter(e, handler) { if

  • js ondocumentready onmouseover onclick onmouseout 样式

    复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q

  • 实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

    实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

    一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它.此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样.可以看到效果: RadioButtonList效果: CheckBoxList效果: 这资实现数据,Insus.NET准备了五行(Five Phases) 创建一个对象[Five Phases]:FivePhases.

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

    javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效 暂时解决办法是,别让绑定事件的元素靠浏览器边

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • javascript中mouseover、mouseout使用详解

    本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对 应该是是否要运行事件函数中的相关操作... 首先你可以猛戳这里: 问题的出现 注:jquery中的mouseover/out事件也有此问题 解决方法一: 在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout. 网上很多说法,这两个事件只有ie支持,其他浏览器不支持. 但是我在最新版本的火狐与谷歌都支持了

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

    最近写点东西,比较闹心,一个弹出层,上边有其他元素,本意是鼠标离开弹出层时,执行一些动作,但在实际应用中,鼠标离开弹出层中的元素时,也会激活这些动作.试了各浏览器的停止事件冒泡的方法,均无效. 还是咱们javaeye里高人众多,在一个哥们博客中发现了如下代码: 复制代码 代码如下: function isMouseLeaveOrEnter(e, handler) {            if (e.type != 'mouseout' && e.type != 'mouseover')

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

    我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画:当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发):当鼠标移出的时候,橙色方块消失. 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行淡入动画,但是当鼠标从黑色框经过粉色框的时候,橙色框就消失了,然后又执行一遍淡入动画.当鼠标从粉色框移出到黑色框的时候,橙色框的淡入动画又被执行.这不是我想要的. 初期代码: <!DOCTYPE html> <html> <head> <script src=&quo

  • python基于pygame实现响应游戏中事件的方法(附源码)

    python基于pygame实现响应游戏中事件的方法(附源码)

    本文实例讲述了python基于pygame实现响应游戏中事件的方法.分享给大家供大家参考,具体如下: 先看一下我做的demo效果: 当玩家按下键盘上的:上,下,左,右键的时候,后台会打印出玩家所按键的数字值,而图形会随之移动 这是客观上面存在的现象. 那么啥是事件呢? 你叫我做出定义,我不知道,我只能举个例子说明,例如接下来的代码中,列出来一些关于游戏中的事件 ''' 事件 产生途径 参数 QUIT 用户按下关闭按钮 none ATIVEEVENT Pygame被激活或者隐藏 gain, sta

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • php异步:在php中使用fsockopen curl实现类似异步处理的功能方法

    PHP从主流来看,是一门面向过程的语言,它的最大缺点就是无法实现多线程管理,其程序的执行都是从头到尾,按照逻辑一路执行下来,不可能出现分支,这一点是限制php在主流程序语言中往更高级的语言发展的原因之一. 在PHP中我们有的时候其实希望在执行某项操作的时候,同时去执行另外一项操作,举一个场景:在用户抢票的时候,你并不希望用户排队去连接数据库进行查询.判断.插入,完成之后再返回用户结果.其实我们并不需要用户等那么久的时间,用户提交之后,直接告诉他已经抢票成功了就可以了,至于各种操作,交给后台去处理

  • 简单讲解Android开发中触摸和点击事件的相关编程方法

    在Android上,不止一个途径来侦听用户和应用程序之间交互的事件.对于用户界面里的事件,侦听方法就是从与用户交互的特定视图对象截获这些事件.视图类提供了相应的手段. 在各种用来组建布局的视图类里面,你可能会注意到一些公共的回调方法看起来对用户界面事件有用.这些方法在该对象的相关动作发生时被Android框架调用.比如,当一个视图(如一个按钮)被触摸时,该对象上的onTouchEvent()方法会被调用.不过,为了侦听这个事件,你必须扩展这个类并重写该方法.很明显,扩展每个你想使用的视图对象(只

  • wxpython中Textctrl回车事件无效的解决方法

    本文实例讲述了wxpython中Textctrl回车事件无效的解决方法.分享给大家供大家参考,具体如下: 今天使用wxptyhon的Textctrl控件开发客户端时遇到了一个问题, 按照HTML表单的逻辑, 我们在Textctrl里回车应该提交查询, 但是wxpython的Textctrl很奇怪, 回车了居然是像Tab作用一样跳转到下一个控件.这样的话,要完成查询, 要么是鼠标点击按钮, 要么需要按两次或者两次以上. Google了一下, 无答案, 但是得到了一些有用的资料: TextCtrl支

  • 基于JSP的RSS阅读器的设计与实现方法(推荐)

    基于JSP的RSS阅读器的设计与实现方法(推荐)

    阅读器访问地址:http://easyrss.tk/,欢迎体验! 阅读导览 一. 概述 二. 设计的基本概念和原理 三. 设计方案 四. 主要源代码 五. 阅读器使用说明 概述 获得信息是在人类的生活中是必不可少的环节.如果现在的社会对获得信息不快捷,那么这个社会将不会像如今这般的发达和进步.在当今网络技术相当发达的今天,大量的信息充斥在网上.现在网络越来越发达,用户在网上既能工作也能娱乐.当用户在网上需浏览很多个网站才能获取自己多需的信息时,那就感觉很累.因为现在每个网站都有很多信息,找到自己

  • html中鼠标滚轮事件onmousewheel的处理方法

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍. Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel.滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta.不知道为何在该问题上其他厂商和微软的如此一致.Firefox可

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

随机推荐