Jquery에서 호버 이벤트를 취소하는 방법

jQuery는 매우 인기 있는 JavaScript 라이브러리로, 개발자가 빠르고 쉽게 JavaScript 코드를 작성하고 웹 페이지에 대화형 효과를 추가할 수 있도록 다양한 편리한 기능과 메서드를 제공합니다. 그 중 hover() 메소드는 마우스 진입 및 종료 이벤트를 바인딩하는 데 사용되지만 때로는 특정 조건이 트리거된 후 hover 이벤트를 취소해야 하는 경우가 있습니다. 이 기사에서는 jQuery가 hover 이벤트를 취소하는 방법을 소개합니다.

먼저 hover() 메소드의 구문을 살펴보겠습니다.

$(selector).hover(handlerIn, handlerOut)

그 중 selector는 이벤트가 바인딩되는 요소 선택자이고, handlerIn은 마우스가 해당 요소에 들어갈 때 실행되는 함수이고, handlerOut은 마우스가 요소를 떠날 때 실행되는 함수입니다.

호버 이벤트를 취소하려면 jQuery에서 제공하는 off() 메서드를 사용할 수 있습니다. off() 메소드는 요소에서 하나 이상의 이벤트 핸들러를 제거하는 데 사용됩니다.

구문은 다음과 같습니다.

$(selector).off(event,childSel,handler)

• event: 필수, 삭제할 이벤트 유형을 나타냅니다. 여러 이벤트 유형을 공백으로 구분합니다.
• childSel: 선택 사항, 요소의 하위 요소를 나타냅니다. 지정된 하위 요소 프로시저
• handler: 선택 사항, 제거할 이벤트에 대한 특정 핸들러를 나타냅니다. 생략하면 모든 이벤트가 삭제됩니다.

따라서 hover 이벤트를 해제하려면 다음 코드만 사용하면 됩니다.

$(selector).off('mouseenter mouseleave');

그 중 mouseenter와 mouseleave는 각각 마우스 입력 및 종료 이벤트에 해당합니다.

off() 메서드를 사용하여 이벤트를 해제하면 모든 이벤트 핸들러가 삭제된다는 점에 유의하세요. 이벤트 핸들러만 제거하려는 경우 off() 메서드의 세 번째 매개변수를 사용하여 삭제할 특정 이벤트 핸들러를 지정할 수 있습니다.

예를 들어 다음 HTML 코드가 있다고 가정해 보겠습니다.

<div id="box">鼠标悬停会出现提示</div>

마우스를 요소 위로 가져갈 때 프롬프트 상자가 표시되기를 원하지만 특정 조건(예: 다른 버튼이 있는 경우)에서는 프롬프트 상자를 취소해야 합니다.

$(function() {
  var $box = $('#box'); // 获取元素
  $box.hover(function() {
    // 鼠标进入时弹出提示框
    $box.append('<div id="tip">提示内容</div>');
  }, function() {
    // 鼠标离开时隐藏提示框
    $box.find('#tip').remove();
  });
  
  $('#button').on('click', function() {
    // 点击按钮解除hover事件
    $box.off('mouseenter mouseleave');
  });
});

위 코드에서는 먼저 호버 이벤트를 바인딩합니다. 마우스가 들어가면 프롬프트 상자가 팝업되고 마우스가 나가면 프롬프트 상자가 숨겨집니다. . 그런 다음 다른 버튼을 클릭하면 사용자가 더 이상 툴팁을 볼 수 없도록 hover 이벤트를 닫습니다.

요약하자면 jQuery를 사용하여 호버 이벤트를 취소하는 방법은 매우 간단합니다. off() 메서드를 사용하고 취소할 이벤트 유형을 지정하기만 하면 됩니다. 물론 특정 이벤트 핸들러를 제거해야 하는 경우 off() 메소드에서 제공하는 세 번째 매개변수를 사용할 수도 있습니다.

위 내용은 Jquery에서 호버 이벤트를 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!