mouseout 및 mouseover가 jQuery 이벤트에 하위 요소가 있는 경우-JS 튜토리얼-php.cn

mouseout 및 mouseover가 jQuery 이벤트에 하위 요소가 있는 경우

黄舟

풀어 주다： 2017-06-28 14:15:28

원래의

1558명이 탐색했습니다.

마우스 아웃 및 마우스 오버 이벤트인 마우스 아웃 및 마우스 오버 이벤트는 누구나 잘 알고 있지만, 일부 사람들은 하위 요소가 있을 때 마우스 아웃 및 하위 요소 위에 마우스를 올려도 해당 이벤트에 표시된다는 사실을 여전히 모르는 경우가 있습니다. 하나의 트리거. 예를 보면 다음과 같습니다.

<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 이벤트도 트리거됩니다.

위 내용은 mouseout 및 mouseover가 jQuery 이벤트에 하위 요소가 있는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!