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 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php开发微信支付获取用户地址
2015/10/04 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
JavaScript中Function详解
2015/02/27 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python中类的创建和实例化操作示例
2019/02/27 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
网络维护管理员的自我评价分享
2013/11/11 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
体育教师自荐信范文
2013/12/16 职场文书
工程售后服务承诺书
2014/05/21 职场文书
刑事附带民事代理词
2015/05/25 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
Python中文纠错的简单实现
2021/07/07 Python
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript