cari

Rumah >hujung hadapan web >tutorial js >jQuery事件中mouseout和mouseover有子元素的情况

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

黄舟
黄舟asal
2017-06-28 14:15:281579semak imbas

大家都熟悉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(&#39;fast&#39;);  
  
    }); 
  
      
  
    $("#list").bind("mouseout",function(){  
  
        $(this).slideUp(&#39;fast&#39;);  
  
    });
  
</script>  
  
</html>

这个例子原意是想打开一个列表框然后选择一个选项。鼠标移开列表框的时候关闭，但是事实情况是鼠标只要移上列表框就关闭。原因就是，列表绑定了一个mouseout事件，因为该列表有很多子元素，所以同意会触发ul，li，的鼠标掠过事件，也就是说，当鼠标移出ul，li的时候同样会触发mouseout事件。

解决的方法有多种，本文就是用jquery对应的两个事件，mouseenter 和 mouseleave，

只要把mouseout事件名改成mouseleave，就大功告成了。嘿嘿，简单！jquery都想到了。^_^,

Mouseleave ：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。例子

MouseEnter ：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

Atas ialah kandungan terperinci jQuery事件中mouseout和mouseover有子元素的情况. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法Artikel seterusnya：jquery阻止click与mouseover以及mouseout冒泡问题解决

Artikel berkaitan

Lihat lagi