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 maintenir enfoncé pendant 1000 à 1500 ms.

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

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

Answer 1

var timeoutId = 0; 

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

Modifier: correction par AndyE ... merci!

Edit 2: en utilisant bind maintenant deux événements avec la même gestionnaire par Gnarf

Answer 2

On peut supposer que vous pourriez lancer un appel setTimeout à mousedown, puis l'annuler en mouseup (si mouseup se produit avant que votre délai d'attente terminé) . Cependant, il semble qu'il existe un plugin: longclick.

Answer 3

Voici mon implémentation 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); 
    }); 

} 

Answer 4

Aircoded (mais testé sur this fiddle)

(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 5

var _timeoutId = 0; 

    var _startHoldEvent = function(e) { 
     _timeoutId = setInterval(function() { 
     myFunction.call(e.target); 
     }, 1000); 
    }; 

    var _stopHoldEvent = function() { 
     clearInterval(_timeoutId); 
    }; 

    $('#myElement').on('mousedown', _startHoldEvent).on('mouseup mouseleave', _stopHoldEvent); 

Answer 6

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

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

Answer 7

j'ai écrit un code pour le rendre facile

//Add custom event listener 
 
$(':root').on('mousedown', '*', function() { 
 
    var el = $(this), 
 
     events = $._data(this, 'events'); 
 
    if (events && events.clickHold) { 
 
     el.data(
 
      'clickHoldTimer', 
 
      setTimeout(
 
       function() { 
 
        el.trigger('clickHold') 
 
       }, 
 
       el.data('clickHoldTimeout') 
 
      ) 
 
     ); 
 
    } 
 
}).on('mouseup mouseleave mousemove', '*', function() { 
 
    clearTimeout($(this).data('clickHoldTimer')); 
 
}); 
 

 
//Attach it to the element 
 
$('#HoldListener').data('clickHoldTimeout', 2000); //Time to hold 
 
$('#HoldListener').on('clickHold', function() { 
 
    console.log('Worked!'); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<img src="http://lorempixel.com/400/200/" id="HoldListener">

See on JSFiddle

Maintenant, vous avez juste besoin de régler l'heure de la tenue et ajouter clickHold événement votre élément