大家都熟悉mouseout 和 mouseover事件,就是鼠标移出和鼠标掠过事件,但是还是有部分人不知道在有子元素的情况下,同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>mouseout子元素的触发</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
#list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}
#list ul{margin:0;padding:0;background:#333;}
#list ul li{list-style:none;margin-bottom:5px;}
#list ul li a:hover{background:#666;color:#FFF;}
</style>
</head>
<body>
<a href="#" id="showList">鼠标请过来</a>
<div id="list" style="display:none;">
<ul>
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
<li><a href="#">选项四</a></li>
<li><a href="#">选项五</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
$("#showList").bind("mouseover",function(){
$("#list").toggle('fast');
});
$("#list").bind("mouseout",function(){
$(this).slideUp('fast');
});
</script>
</html>
这个例子原意是想打开一个列表框然后选择一个选项。鼠标移开列表框的时候关闭,但是事实情况是鼠标只要移上列表框就关闭。原因就是,列表绑定了一个mouseout事件,因为该列表有很多子元素,所以同意会触发ul,li,的鼠标掠过事件,也就是说,当鼠标移出ul,li的时候同样会触发mouseout事件。
解决的方法有多种,本文就是用jquery对应的两个事件,mouseenter 和 mouseleave,
只要把mouseout事件名改成mouseleave,就大功告成了。嘿嘿,简单!jquery都想到了。^_^,
Mouseleave :与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。例子
MouseEnter :与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。请看下面例子的演示。例子
分享到:
相关推荐
主要介绍了鼠标经过子元素触发mouseout,mouseover事件的解决方案的相关资料,需要的朋友可以参考下
就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouse...
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件。 jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接...
在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法,这两个事件只有ie支持,其他浏览器不支持。 但是我在最新版本的火狐与谷歌都支持了mouseenter 与 mouseleave!!!!! 另外ie是...
在我们对一个dom添加mouseover和mouseout时,也就是jquery的hover事件,如果该dom有子元素,鼠标移到子元素时会触发mouseout事件,但往往实际情况我们希望在子元素上不触发out事件
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题: 给一个嵌套的层级绑定mouseout事件,会发现mouseout事件...
当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。 mouseover事件大多数时候会与 mouseout 事件一起使用。 mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些...
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。...2)不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout 只有在鼠标指针穿过
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 <script type="text/javascript" src="/jquery/jquery.js"></...
Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD 25. enableExternalCapture事件 语法格式: window....
mouseout(fn) mouseover(fn) mouseup(fn) resize(fn) scroll(fn) select( [fn] ) submit( [fn] ) unload(fn) 效果 基本 show() show(speed, [callback]) hide() hide(speed, [callback]) toggle() ...
mouseout(fn) mouseover(fn) mouseup(fn) resize(fn) scroll(fn) select( [fn] ) submit( [fn] ) unload(fn) 效果 基本 show() show(speed, [callback]) hide() hide(speed, [callback]) toggle() ...
[fn] ) focus( [fn] ) keydown( [fn] ) keypress( [fn] ) keyup( [fn] ) mousedown(fn) mousemove(fn) mouseout(fn) mouseover(fn) mouseup(fn) resize(fn) scroll(fn) select( [fn] ) submit( [fn] ) unload(fn) ...
mouseout([[data],fn]) mouseover([[data],fn]) mouseup([[data],fn]) resize([[data],fn]) scroll([[data],fn]) select([[data],fn]) submit([[data],fn]) unload([[data],fn]) 效果 基本 show([s,[e],...
8.5.24 mouseout(fn) 142 8.5.25 mouseover(fn) 142 8.5.26 mouseup(fn) 142 8.5.27 resize(fn) 143 8.5.28 scroll(fn) 143 8.5.29 select() 144 8.5.30 select(fn) 144 8.5.31 submit() 144 8.5.32 submit(fn) 145 ...