>  기사  >  웹 프론트엔드  >  jquery hover 이벤트를 취소하고 바인딩하는 올바른 방법에 대한 자세한 설명

jquery hover 이벤트를 취소하고 바인딩하는 올바른 방법에 대한 자세한 설명

黄舟
黄舟원래의
2017-06-26 13:24:432174검색

웹 디자인에서 우리는 마우스 hover 이벤트에 응답하기 위해 jquery를 자주 사용합니다. 이는 mouseover 및 mouseout 이벤트와 동일한 효과를 가지는데 on을 사용하여 hover 메서드를 바인딩하는 방법은 무엇입니까? 바운드 이벤트를 취소하기 위해 off를 사용하는 방법은 무엇입니까?
1. 호버 이벤트 바인딩 방법
먼저 다음 코드를 살펴보세요. 클릭 및 호버 이벤트를 a 태그에 바인딩한다고 가정해 보겠습니다.

$(document).ready(function(){ $('a').on({ hover: function(e) { 
 //Hover event handler 
alert("hover"); },
 click: function(e) { // Click event handler
alert("click"); } }); 
});

a 태그를 클릭하면 이상한 일이 발생합니다. 바운드 호버 이벤트는 전혀 응답하지 않지만 바운드 클릭 이벤트는 정상적으로 응답할 수 있습니다. ㅋㅋㅋ 그래서 이렇게 직접 인용해도 됩니다:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

.hover()는 jQuery 자체에서 정의한 이벤트이기 때문에 단지 사용자의 편의를 위해 mouseenter 및 mouseleave 이벤트를 바인딩하고 호출하는 것은 아닙니다. 실제 이벤트이므로 .on()에서 이벤트 매개변수로 호출할 수는 없습니다.

2. hover 이벤트를 취소하는 방법

off 함수를 사용하여 바인딩된 이벤트를 취소할 수 있다는 것은 누구나 알고 있지만, jquery의 hover 이벤트는 이 방법을 사용하는 경우 매우 특별합니다. 호버 이벤트를 취소하려면 바운드 이벤트를 취소할 수 없습니다.

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler 
alert("mouseover"); }, mouseleave: function(e) {
 //Hover event handler 
alert("mouseout"); }, click: function(e) { 
// Clickevent handler 
alert("click"); } }); 
});
바운드 호버 이벤트를 취소하는 올바른 방법:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

위 내용은 jquery hover 이벤트를 취소하고 바인딩하는 올바른 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.