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


Posted in Javascript onDecember 09, 2010

问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了。在要做浮动层效果的时候会经常遇到这个问题。
解决方法一:
使用jQuery,这个大家都会的:

<div id="div1">触发显示浮动层</div> 
<div id="div2"> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div> 
<script> 
$("#div1").mouseover(function(){ 
$("#div2").show(); 
$("#div2").bind("mouseleave",function(){ 
$(this).hide(); 
});//此句需要写在触发浮动层的函数内 
};); 
</script>

解决办法二:
利用onmousemove事件优先的办法,来防止在子元素中触发onmouseout:
<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">触发显示浮动层</div> 
<div id="div2" onmousemove='this.style.display="";' onmouseout='this.style.display="none";'> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div>
Javascript 相关文章推荐
客户端js性能优化小技巧整理
Nov 05 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
详解vue中移动端自适应方案
May 05 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 #Javascript
Javascript将string类型转换int类型
Dec 09 #Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 #Javascript
web前端开发也需要日志
Dec 09 #Javascript
JS拖动技术 关于setCapture使用
Dec 09 #Javascript
一起来写段JS drag拖动代码
Dec 09 #Javascript
教您去掉ie网页加载进度条的方法
Dec 09 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
js实现烟花特效
2020/03/02 Javascript
python3大文件解压和基本操作
2017/12/15 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python中map的基本用法示例
2018/09/10 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
如何使用python传入不确定个数参数
2020/02/18 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
如何通过python检查文件是否被占用
2020/12/18 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
战友聚会邀请函
2014/01/18 职场文书
经销商培训邀请函
2014/01/21 职场文书
居委会工作总结2015
2015/05/18 职场文书
民主生活会意见
2015/06/05 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Java 定时任务技术趋势简介
2022/05/04 Java/Android