web-dev-qa-db-fra.com

Vérifiez si la barre d'espace est enfoncée et la souris se déplace en même temps avec jQuery?

Existe-t-il un moyen de vérifier si la barre d'espace et de suivre en même temps la direction dans laquelle la souris se déplace et la distance, etc.

Le point est que je veux reproduire la façon dont Photoshop défile lorsque vous maintenez la barre d'espace, le bouton gauche de la souris et que vous déplacez la souris, mais sans avoir à maintenir le bouton gauche de la souris enfoncé.

javascriptjqueryjavascript-events
20
Colin

Vous pouvez utiliser keydown() et keyup() pour suivre si la barre d'espace est enfoncée ou non et regarder cet état dans votre - mousemove() gestionnaire d'événements. Par exemple:

var space = false;
$(function() {
  $(document).keyup(function(evt) {
    if (evt.keyCode == 32) {
      space = false;
    }
  }).keydown(function(evt) {
    if (evt.keyCode == 32) {
      space = true;
      console.log('space')
    }
  });
});

Et puis votre gestionnaire mousemove() peut voir s'il est pressé ou non.

55
cletus

vous devrez probablement surveiller l'événement keydown, vérifiez qu'il s'agit bien de la barre d'espace, définissez une variable disant qu'il est en panne, désactivez-la lorsque l'événement keyup est vu.

ainsi, vous rechercheriez les mouvements de la souris lorsque cette variable a été définie, indiquant que la barre d'espace a été enfoncée.

4
John Boker

Voici ma solution:

var allowed = true;
$(document).ready(
function () {
    $(document).bind('keydown', 'space', function () {
        if (!allowed) return;
        allowed = false;
        $('#viewport').
            dragscrollable();
    });
    $(document).bind('keyup', 'space', function () {
        allowed = true;
        $('#base').off('mousedown');
        return false;
    });

});

Fonctionne avec jQuery et le plugin Dragscrollable.

3
vanLushi