今天碰到个jquery的mouseout事件的问题,弄了半天总算解决了。jquer ul li 好像绑定ul的mouseout事件,离开第一个li后就会触发。后来在网上查了下叫事件冒泡,改成使用mouseleave即可。mouseover也有冒泡。改用mouseenter。因为bind方法可以屏蔽浏览器的一些事件冒泡行为。另外,ie支持mouseenter,mouseleave事件,firefox等不支持,但通过jquery的这种方式后,所有浏览器均支持上面的语法。
html代码如下
<div id="nav"> <ul class="nav1"> <li><a href="#">111111111111</a></li> <li><a href="#">111111111111</a></li> <li><a href="#">111111111111</a></li> </ul> <ul class="nav2"> <li><a href="#">222222222222</a></li> <li><a href="#">222222222222</a></li> <li><a href="#">222222222222</a></li> </ul> <ul class="nav3" style="border:10;"> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> </ul> <ul class="nav4"> <li><a href="#">444444444444</a></li> <li><a href="#">444444444444</a></li> <li><a href="#">444444444444</a></li> </ul> </div>
一开始的绑定方法如下:
("#nav").mouseout(function() { $('.nav1').hide(); $('.nav2').hide(); $('.nav3').hide(); $('.nav4').hide(); });
改为使用bind方法即可,代码如下:
$('#nav').bind("mouseleave",function(){ $('.nav1').hide(); $('.nav2').hide(); $('.nav3').hide(); $('.nav4').hide(); });
相关推荐
jquery实现ul_li菜单展开收起效果.
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会...给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样 代码如下: <!DOC
通过jquery 控制ul下li标签中的ul li列表,来实现ul的收缩和展开功能
jquery阻止事件冒泡jquery阻止事件冒泡jquery阻止事件冒泡
jquery,tips,冒泡,jquery,tips,冒泡
jquery 搜索 键盘选择 li 键盘事件 鼠标事件 ul li 鼠标+键盘上下选择li li变色
很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件。而在实现过程中,可能会出现一些不理想的状况。 先看下使用mouseout的效果: 先看下使用mouseout的效果: 使用了mouseout事件...
jQuery ul 分页
jquery-iscroll.js鼠标控制ul左右滑动
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片 jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片
主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
jquery 滚轴 mousewheel
js阻止冒泡及jquery阻止事件冒泡示例介绍.docx