J'ai trouvé un sujet comme celui-ci, mais je ne l'ai absolument pas compris. Dans mon code, j'ai quand la souris bouge, faites ceci, mais quand elle ne bouge pas pendant une demi-seconde, faites ceci, mais quand elle bouge faites cela. Voici ma jQuery temporaire:

$(document).ready(function() {

 $('.test').mouseenter(function(){

  $(this).mousemove(function(){
   $(this).css({
    'background-color' : '#666',
    'cursor' : 'none'
   });
  });

 });

 $('.test').mouseout(function(){
  $(this).css({
   'background-color' : '#777',
   'cursor' : 'default'
  });
 });

});

Et je n'ai absolument aucune idée de comment faire cela, fondamentalement mon code fait cela - lorsque vous entrez un élément avec la souris et que votre souris se déplace à l'intérieur de cet élément, écrivez ceci en CSS et lorsque la souris est hors de l'élément, écrivez ceci en CSS, mais quand la souris est à l'intérieur de cet élément et quand elle ne bouge pas pendant cette période, je ne peux pas le comprendre.

3
SenTisso 15 avril 2018 à 01:34

4 réponses

Meilleure réponse

J'ai compris que vous vouliez détecter les mouvements de la souris sur un élément particulier.

Pour ce faire, vous devez utiliser l'événement mousemove ... Il n'y a malheureusement pas d'événement mousefroze!

Vous utiliserez donc un setTimeout() et effacerez constamment son rappel pendant que la souris bouge. Étant donné que cet événement se déclenche plusieurs fois sur un seul léger mouvement, vous pouvez définir un délai assez serré. Cela devrait donc être exact.

Le rappel setTimeout ne s'exécutera que lorsque la souris cessera de bouger. Et c'est tout le "truc" .

À propos des retards ... Je pense que 100 ms est la valeur précise la plus basse. Moins que cela créera un scintillement lors des mouvements "lents" de l'utilisateur.

Le mouseenter n'est pas vraiment utile ici, car il est remplacé par l'événement mousemove juste après (car lorsque la souris entre ... elle bouge aussi!). Mais le mouseleave ou mouseout est vraiment utile pour restaurer l'état d'origine de l'élément et effacer le délai aussi ... Parce que la souris ne bougera pas sur votre élément ne veut pas dire qu'il ne bouge pas du tout. Il faut donc le clarifier en partant.

$(document).ready(function() {

  var test = $('#test');
  var moveTimer;

  test.on("mouseout",function(){
    $(this).css({
      'background-color' : 'white',
    }).text("");
    clearTimeout(moveTimer);
  });

  test.on("mousemove",function(){
    console.log("I'm moving!");

    clearTimeout(moveTimer);
    moveTimer = setTimeout(function(){
      console.log("I stopped moving!");
      test.css({
        'background-color' : 'red',
      }).text("The mouse is not moving.");
    },100)

    $(this).css({
      'background-color' : 'blue',
    }).text("Movement detected...");
  });
});
#test{
  margin:50px;
  border:2px solid black;
  height:200px;
  width:200px;
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test"></div>

CodePen

1
Louys Patrice Bessette 15 avril 2018 à 04:40

Cela peut différer de votre code actuel, mais je pense que CSS est plus approprié ici que JavaScript.

.test {
    background-color:#666;
}

.test:hover {
    background-color:#777;
    cursor:none;
}

Ces lignes de CSS devraient effectuer exactement la même chose sans complication. Notez que dans votre exemple, pour chaque pixel que la souris déplace, le CSS est à nouveau défini. Et puisque vous ne supprimez pas le gestionnaire d'événements à la sortie de la souris, l'événement est en fait exécuté plusieurs fois.

0
Ibu 14 avril 2018 à 22:40

On dirait que vous recherchez des délais d'attente. Dans un projet similaire, j'ai utilisé quelque chose comme ceci:

var timer;

function active() {
    // Apply active styles
}

function inactive() {
    // Apply inactive styles
}

$('.test').mousemove(function(){
    active(); // Apply active styles
    clearTimeout(timer); // Reset the timer
    timer = setTimeout(out, 500);
});

Une fois que vous déplacez la souris sur la zone, cela lance un minuteur qui réinitialise chaque mouvement de la souris. Si le temporisateur arrive à expiration, l'utilisateur devient inactif et nous exécutons le code que nous voulons.

2
Different55 16 avril 2018 à 15:27

Donc, je cherchais simplement sur Google. Voici la réponse:

  $(document).ready(function() {
    var countdown;
    $('.test').hover(function() {
      setTimeout(function(){
        $('.test').css({
          'background-color' : '#666',
          'cursor' : 'none'
        });
        cursor();
      }, 2000);
    }, function(e){
      $('.test').css({
          'background-color' : '#777',
      'cursor' : 'default'
      });
    });

    $('.test').mousemove(function() {
      $('.test').css({
        'background-color' : '#777',
        'cursor' : 'default'
        });
        cursor();
      });
      function cursor() {
        countdown = setTimeout(function() {
          $('.test').css({
            'background-color' : '#666',
            'cursor' : 'none'
          });
        }, 2000);
      }
    });
  });
1
SenTisso 14 avril 2018 à 22:50