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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
一个网马的tips实现分析
Nov 28 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 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请求Socket接口测试实例
2016/08/12 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript 写类方式之五
2009/07/05 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python笔试面试题小结
2019/09/07 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
电气专业推荐信范文
2013/11/18 职场文书
揭牌仪式主持词
2014/03/19 职场文书
禁止酒驾标语
2014/06/25 职场文书
社区党员公开承诺书
2014/08/30 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
运动会观后感
2015/06/09 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS