基于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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
js 与或运算符 || && 妙用
Dec 09 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JS函数重载的解决方案
May 13 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
javascript实现日历效果
2019/06/17 Javascript
python实现simhash算法实例
2014/04/25 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
利用python计算时间差(返回天数)
2019/09/07 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
如何基于python实现脚本加密
2019/12/28 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
学雷锋的心得体会
2014/09/04 职场文书
就业协议书
2014/09/12 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
讲座通知范文
2015/04/23 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Redis批量生成数据的实现
2022/06/05 Redis