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


Posted in Javascript onNovember 18, 2013

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

还是咱们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事件的元素,这样就可以避免上述问题。
Javascript 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
如何提高数据访问速度
Dec 26 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 #Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 #Javascript
jquery cookie的用法总结
Nov 18 #Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 #Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 #Javascript
js 页面元素的几个用法总结
Nov 18 #Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
js中的this关键字详解
2013/09/25 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python中dir函数用法分析
2015/04/17 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
django ajax json的实例代码
2018/05/29 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
实体的生命周期
2013/08/31 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
小学生开学感言
2014/02/28 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
物业接待员岗位职责
2015/04/15 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Golang 链表的学习和使用
2022/04/19 Golang