jquery 이벤트에서 mouseout과 mouseleave의 차이점을 공유하세요.-JS 튜토리얼-php.cn

jquery 이벤트에서 mouseout과 mouseleave의 차이점을 공유하세요.

黄舟

풀어 주다： 2017-06-28 11:04:58

원래의

1029명이 탐색했습니다.

이 글은 주로 jQuery에서 mouseleave와 mouseout의 차이점을 드롭다운 박스 효과를 흉내내면서 자세히 설명하고 있습니다. 관심 있는 친구들은 참고하시면 됩니다.

이 글은 jQuery에서 mouseleave와 mouseout의 차이점을 자세히 소개하고 있습니다. with 참고로 구체적인 내용은 다음과 같습니다
마우스 호버 효과를 얻기 위해 jQuery를 사용할 때 일반적으로 많은 사람들이 mouseover 및 mouseout 이벤트를 사용합니다. 구현 과정에서 일부 바람직하지 않은 상황이 발생할 수 있습니다.
먼저 mouseout 사용 효과를 살펴보겠습니다.

<p>先看下使用mouseout的效果：</p>
<p id="container" style="width: 300px;">
<p id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</p>
<p id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<p><script type=&#39;text/javascript&#39;> 
jQuery(document).ready(function($) { 
   $("#title").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   $("#container").mouseout(function() { 
     $("#list").hide(); 
   }); 
 }); 
</script>

로그인 후 복사

첫 번째 줄, 두 번째 줄, 세 번째 줄 mouseout 이벤트를 사용할 때 드롭다운 컨테이너에서 마우스가 움직이자마자 # 실제로는 mouseout 때문에 이벤트가 발생합니다. 즉, 이벤트가 컨테이너의 하위 요소에 동시에 바인딩될 수 있으므로 hide()는 다음과 같습니다. 마우스가 각 하위 요소 밖으로 이동할 때 트리거됩니다.
jQuery 1.3부터 mouseenter와 mouseleave라는 두 가지 새로운 마우스 이벤트가 추가되었습니다. mouseout 이벤트와 달리 mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다.
mouseleave 이벤트의 효과를 살펴보겠습니다.

<p id="container2" style="width: 300px;">
<p id="title2" style="cursor: pointer; background: #ccc;">使用了mouseleave事件↓</p>
<p id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<script type=&#39;text/javascript&#39;> 
jQuery(document).ready(function($) { 
   $("#title2").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list2").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   // 绑定mouseleave事件，效果很好 
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

로그인 후 복사

첫 번째 줄, 두 번째 줄, 세 번째 줄 mouseleave 및 mouseout 이벤트는 이벤트 버블링이 특정 시간에 매우 유용하기 때문에 고유한 용도가 있습니다.
Solve p mouseout 이벤트 버블링 문제에 대한 해결책은 jquery의 바인드 메소드를 사용하는 것입니다. 예를 들면 다음과 같습니다. 이제 아래에 마우스 이벤트를 모니터링해야 하는 p 객체가 있습니다. 마우스가 아래 p 밖으로 이동할 때 숨겨진 p
JS는 다음과 같습니다.

<p class="dpx2"><p class="dpx2_px" style="cursor:pointer;" id="searchSort">请选择排序方式↓</p>
      <p class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <p><a class="sortA">按时间升序↑</a></p>
        <p><a class="sortA">按时间降序↓</a></p>
        <p><a class="sortA">按评论数量升序↑</a></p>
        <p><a class="sortA">按评论数量降序↓</a></p>
        <p><a class="sortA">按点击数升序↑</a></p>
        <p><a class="sortA">按点击数降序↓</a></p>
      </p>
    </p>

로그인 후 복사

위 설명에 따라 드롭다운 효과를 시뮬레이션합니다.

1. 마우스 포인터가 선택한 요소를 벗어나는지 여부에 관계 없습니다. 또는 하위 요소가 있으면 mouseout 이벤트가 트리거됩니다.

2. mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다.

rreee

위 내용은 jquery 이벤트에서 mouseout과 mouseleave의 차이점을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!