jQuery事件中mouseout和mouseover有子元素的情況
- 黄舟原創
- 2017-06-28 14:15:281611瀏覽
大家都熟悉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 事件。
以上是jQuery事件中mouseout和mouseover有子元素的情況的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn