Mousehold événement en Jquery

En gros, j'ai cette image avec les touches fléchées gauche et droite. Cette image, par défaut, est la première image que j'ai extraite de gif, l'original gif contient 31 images. Mon objectif est lorsque l'utilisateur clique sur le bouton avec la flèche droite, je veux afficher l'image suivante et ainsi de suite... Tout fonctionne parfaitement comme indiqué ci-dessous de code. Cependant, j'ai besoin d'ajouter un peu de mousehold événement de sorte que lorsque l'utilisateur cliquez et maintenez la souris, je veux continuer à tirer les prochaines images. Comment puis-je y parvenir?

$('#arrow_right').click(function (event) {
    event.preventDefault();
    var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id'));

    if (data_id >= 1 && data_id <= 30) {
        data_id = data_id + 1;
        var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">');
    }
});
  • Comment parler de 'taphold' événement?
InformationsquelleAutor user2310422 | 2013-05-23
  1. 16

    Eh bien, vous pouvez utiliser le mousedown de l'événement pour lancer une fonction qui affiche le gif-image: http://api.jquery.com/mousedown/ puis ajouter un autre gestionnaire d'événement pour l' mouseup événement qui va arrêter cette fonction. Cette fonction peut être appelée via setInterval() dans le mousedown-cas, par exemple, et être arrêté par clearInterval() dans le mouseup événement.

    C'est un exemple qui montre le principe:

    var interval;
$(button).addEventListener('mousedown',function(e) {
    interval = setInterval(function() {
        //here goes your code that displays your image/replaces the one that is already there
    },500); //500ms between each frame
});
$(button).addEventListener('mouseup',function(e) {
    clearInterval(interval);
});
//Thank you, Timo002, for your contribution!
//This code will stop the interval if you move your mouse away from the button while still holding it.
$(button).addEventListener('mouseout',function(e) {
    clearInterval(interval);
});
    • Pouvez-vous me montrer un exemple de comment les événements mousedown et setInterval peuvent travailler ensemble.
    • J'ai eu à travailler grâce!
    InformationsquelleAutor Zim84
  2. 4

    En plus de la réponse de Zim84, je dois également ajouter ce bout de code!

    $(button).addEventListener('mouseout',function(e) {
    clearInterval(interval);
});

    Cela va prendre soin que si quelqu'un appuie sur le bouton (mousedown) et tient ses de la souris vers le bas et de feuilles (mouseout) le bouton, l'intervalle est également effacé. Sans cela, l'intervalle ne s'arrête pas à cela en particulier situation.

    InformationsquelleAutor Timo002