HTML 버튼에서 잠깐 지연된 후에 클릭을 트리거하는 방법은 무엇입니까?

Question

duell이라는 기술이 있으며 웹 사이트의 접근성 향상을 위해 사용됩니다. 기기 (예 : 마우스) 만 이동할 수있는 사용자에게서 사용되며이 기능을 통해 작동합니다. 호버링 효과에서는 호가 예를 1 초로 설정하는 것보다 오랫동안 지속되면 클릭 기능이 실행됩니다. 내 HTML에서 내 버튼 요소에 대해 jQuery를 사용하여이를 에뮬레이션하고 싶습니다.

Answer 1

(function() { 
    var clearTimeout = function(b) { 
     window.clearTimeout($(b).data("hoverTimer")); 
    } 
    $("button").hover(function() { 
     var button = $(this); 
     button.data("hoverTimer", window.setTimeout(function() { 
     button.trigger("click"); 
     }, 1000)); 
    }, function() { 
     clearTimeout(this) 
    }).click(function() { 
     clearTimeout(this) 
    }); 
})(); 

여러 번 클릭하지 않도록 편집되었습니다. (고마워, Alnitak)

Answer 2

var timer = null; 
$('button').hover(mouseIn, mouseOut); 

function mouseIn() { 
    timer = setTimeout(triggerClick, 3000); 
} 

function mouseOut() { 
    clearTimeout(timer); 
} 

function triggerClick() { 
    $('button').trigger('click'); 
} 

이 솔루션은 타이머를 사용합니다. 요소 위에 마우스를 올리면 타이머가 시작되고 위에 마우스를 올려 놓으면 요소가 지워집니다. 분명히이 버튼은 1 버튼에서만 작동하지만 페이지의 모든 버튼에서 작동하도록 쉽게 수정할 수 있습니다.

Answer 3

나는 당신이 요청한 것을하기 위해 빠른 jQuery 플러그인을 쓰러 뜨렸다. 여기에 참고로 http://jsfiddle.net/raybellis/tF833/

에서

소스 (데모)는 (현재의) 코드를 보이는 같은 :

(function($) { 

    $.fn.duell = function() { 
     return this.each(function() { 
      var timer = null; 
      var el = this; 
      var stopTimer = function() { 
       if (timer) { 
        clearTimeout(timer); 
        timer = null; 
       } 
      }; 

      var startTimer = function() { 
       stopTimer(); 
       timer = setTimeout(function() { 
        $(el).click(); 
       }, 1000); 
      }; 

      // make sure other clicks turn off the timer too 
      $(el).click(stopTimer); 

      // handle mouseenter, mouseleave 
      $(el).hover(startTimer, stopTimer); 
     }); 
    }; 
})(jQuery);