2016-10-12 4 views
0

호버 이벤트에 jquery 이벤트 위임 기법을 사용하고 싶습니다. 하지만 마우스를 올리면 호버 코드가 표시됩니다. 지금까지이있다 :jquery에서 호버 위임에 지연 효과가있는 방법?

두 번째로 기능을 지연,하지만 내가하지 않는 것은 사용자가 마우스를 이동하면 시간 제한을 취소하는 방법입니다
 $('body').on('mouseenter', "a", function(event) { 

      var interval = setTimeout(function() { 


      }, 1000); 

     }).on('mouseleave', "a", function(event) { 


     }); 

. 나는 clearTimeout이 있다는 것을 알고 있지만 정확한 a 태그에 대한 간격 번호를 얻는 방법처럼 그것을 사용하는 방법을 모른다.

그리고 우리는 aname 또는 id과 같은 관련 특성이 있다고 가정 할 수 없습니다.

아는 사람 있습니까?

감사

답변

1

사용 clearTimeout :

$('body').on('mouseenter', "a", function(event) { 
     if(this.interval) 
      clearTimeout(this.interval); 
     this.interval = setTimeout(function() { 


     }, 1000); 
    }).on('mouseleave', "a", function(event) { 
     clearTimeout(this.interval); 
     this.interval = null; 
    }); 
0

data()

$('body').on('mouseenter', "a", function(event) { 

    var interval = setTimeout(function() { 
     // do some stuff 
    }, 1000); 
    $(this).data('interval', interval) 

    }).on('mouseleave', "a", function(event) {  
     clearTimeout($(this).data('interval')); 
    }); 
+0

사용 :

$.fn.softHover = function(onEnter, onLeave, delay = 500){ return this.each(function(){ var target = this; var timer = setTimeout(function(){ onEnter.call($(target)) }, delay); $(target).mouseleave(function(){ onLeave.call(this); clearTimeout(timer); }); }); } 

가 그냥 그런 식으로 사용 케이스. –

+0

@ c-smile yeah..probably – charlietfl

+0

"would"가 아니지만 확실히 "is". 타이머 ID는 문자열에 직렬화 할 수 없습니다. 예 : 예를 들어 개인 기호. 또는 객체 참조. –

0

당신은 ID를 저장할 수 있습니다 사용하여 요소 자체에 timerId가를 저장하는 어떤 외부 변수를 필요없이 간단한 방법 setTimeout에서 생성하여 clearTimeout :

로 전달
var interval; // declare interval here 

$('body').on('mouseenter', "a", function(event) { 

    interval = setTimeout(function() { } 

}).on('mouseleave', "a", function(event) { 

    clearTimeout(interval); 

}); 
0

바로 답은 clearTimeout에 대한 이야기입니다. var ... 대신 this.interval을 사용하여 문맥을 보존해야합니다. 그것은 데이터의 방법을 사용하는 것보다도 쉽게 '

$('body').on('mouseenter', "a", function(event) { 
    this.interval = setTimeout(function() { 
    // do something 
    }, 1000); 
}).on('mouseleave', "a", function(event) { 
    // undo something 
    clearTimeout(this.interval); 
}); 
0

당신은 하는 MouseLeave 핸들러 내부합니다 (mouseenter 핸들러 내부에서 생성)을 timout을 취소해야합니다.

작은 플러그인이 $ CSTE 연구진 사용하여 마우스 오버 지연을 얻기 위해() 대표 : this.interval는 =`이 더 나은입니다`의

$('.page').on('mouseenter','.element',function(){ 
    $(this).softHover(
     function(){...}, 
     function(){...}, 
    ); 
}); 
관련 문제