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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
vue脚手架搭建过程图解
Jun 06 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
js判断密码强度的方法
Mar 18 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
web方式ftp
2006/10/09 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php显示时间常用方法小结
2015/06/05 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
小学教代会开幕词
2016/03/04 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript