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分页函数代码
Sep 10 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
页面点击小红心js实现代码
May 26 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
客户端限制只能上传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
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
jquery随机展示头像代码
2011/12/21 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
javascript数组的使用
2013/03/28 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python安装scipy的步骤解析
2019/09/28 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
SQL Server面试题
2016/10/17 面试题
软件售后服务承诺书
2014/05/21 职场文书
银行进社区活动总结
2014/07/07 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
学校会议通知范文
2015/04/15 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python实现商品进销存管理系统
2022/05/30 Python
MySQL数据库表约束讲解
2022/06/21 MySQL