Javascript Girl
  1. Javascript Girl
  3. Comment puis-je écouter un clic-et-retenir dans jQuery?
Intereting Posts
Javascript recherchez et remplacez un ensemble de caractères? Comment définir une variable en JavaScript avec fonction echo PHP? Pourquoi document.body est nul dans mon javascript? Essayer de comprendre la récursivité dans les boucles dans javascript Que signifie "javascript: void (0)"? Watir-webdriver – Sélectionnez un style d'affichage de la liste: aucun Aligner le marqueur sur les bords des noeuds D3 Force Layout Remplacer les espaces par & nbsp; Comment exécuter le javascript fn en utilisant l'événement de bouton OnClick (asp.net) ESLint dit que le tableau n'a jamais été modifié même si les éléments sont mis en place Comment dire à Sonar d'utiliser mon fichier LCOV pour la couverture du code HTML5: placer un canevas sur une vidéo avec des contrôles Créer une bibliothèque JavaScript, pourquoi utiliser un IIFE de cette façon? Enregistrez les options d'extension chrome sur chrome.storage? Comment connecter une liste de lieux avec Google Map Points

Comment puis-je écouter un clic-et-retenir dans jQuery?

Je souhaite être en mesure de déclencher un événement lorsqu'un utilisateur clique sur un bouton, puis le détend pour 1000 à 1500 ms.

Existe-t-il une fonctionnalité principale de jQuery ou un plugin qui le permet déjà?

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

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

Edit : correction par AndyE … merci!

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

Air codé (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); })

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

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

On peut supposer que vous pouvez lancer un appel setTimeout dans mousedown , puis l'annuler en mode mouseup (si la mouseup survient avant que votre délai ne soit terminé).

Cependant, il semble qu'il y ait un plugin: longclick .

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); }); } 
  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);

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">