Comment puis-je écouter un click-and-hold dans jQuery?

Question

Je veux pouvoir déclencher un événement lorsqu'un utilisateur clique sur un bouton, puis le maintient enfoncé pendant 1 000 à 1 500 ms.

Existe-t-il une fonctionnalité principale de jQuery ou un plug-in qui permet déjà cela?

Dois-je rouler le mien? Où devrais-je commencer?

Answer 1

 var timeoutId = 0;

$('#myElement').mousedown(function() {
    timeoutId = setTimeout(myFunction, 1000);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});
 

Edit : correction par AndyE ... merci!

Edit 2 : utiliser bind now pour deux événements avec le même gestionnaire par gnarf

Answer 2

Aircoded (mais testé sur ce violon )

 (function($) {
    function startTrigger(e) {
        var $elem = $(this);
        $elem.data('mouseheld_timeout', setTimeout(function() {
            $elem.trigger('mouseheld');
        }, e.data));
    }

    function stopTrigger() {
        var $elem = $(this);
        clearTimeout($elem.data('mouseheld_timeout'));
    }


    var mouseheld = $.event.special.mouseheld = {
        setup: function(data) {
            // the first binding of a mouseheld event on an element will trigger this
            // lets bind our event handlers
            var $this = $(this);
            $this.bind('mousedown', +data || mouseheld.time, startTrigger);
            $this.bind('mouseleave mouseup', stopTrigger);
        },
        teardown: function() {
            var $this = $(this);
            $this.unbind('mousedown', startTrigger);
            $this.unbind('mouseleave mouseup', stopTrigger);
        },
        time: 750 // default to 750ms
    };
})(jQuery);

// usage
$("div").bind('mouseheld', function(e) {
    console.log('Held', e);
})
 

Answer 3

J'ai fait un simple plugin JQuery pour cela si quelqu'un est intéressé.

http://plugins.jquery.com/pressAndHold/

Answer 4

Vous pouvez probablement lancer un appel setTimeout dans mousedown, puis l'annuler dans mouseup (si mouseup se produit avant l'expiration de votre délai d'attente).

Cependant, on dirait qu'il existe un plugin: longclick .

Answer 5

Voici ma mise en œuvre actuelle:

 $.liveClickHold = function(selector, fn) {

    $(selector).live("mousedown", function(evt) {

        var $this = $(this).data("mousedown", true);

        setTimeout(function() {
            if ($this.data("mousedown") === true) {
                fn(evt);
            }
        }, 500);

    });

    $(selector).live("mouseup", function(evt) {
        $(this).data("mousedown", false);
    });

}