首页 / JQUERY / jQuery事件中mouseout和mouseover有子元素的情况

jQuery事件中mouseout和mouseover有子元素的情况

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery事件中mouseout和mouseover有子元素的情况，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1888字，纯文字阅读大概需要3分钟。

内容图文

大家都熟悉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有子元素的情况的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jQuery事件中mouseout和mouseover有子元素的情况全部内容，希望文章能够帮你解决jQuery事件中mouseout和mouseover有子元素的情况所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300205.html

来源：【匿名】