Comment faire pour capturer le clic de la souris avec javascript lorsque la souris s'est déplacée entre mousedown et mouseup

Question

Je construis un site web avec une ligne de temps javascript défilant, en utilisant le code de this tutorial. Il y a une démo à suivre avec le tutoriel here. Mon problème est le suivant: si l'utilisateur clique sur le plan de montage pour le faire glisser, et qu'il lui arrive de cliquer sur un lien, le navigateur l'interprète en cliquant sur le lien lorsque le bouton de la souris est relâché. Par conséquent, il est très facile de naviguer loin de la ligne de temps par accident.

Le comportement que je voudrais est la suivante: en cliquant sur un lien ne déclenche la navigation si la souris n'a pas été déplacé entre mousedown et mouseup. Si la souris a été déplacée alors que le bouton est maintenu enfoncé, le lien n'est pas suivi, car l'utilisateur essaie de déplacer le scénario plutôt que de cliquer sur un lien.

Est-ce possible? J'ai le sentiment que nous avons besoin d'une variable booléenne is_mouse_moved qui est définie sur false sur mousedown et définie sur true sur mousemove. Ensuite, sur mouseup, nous vérifions s'il faut "passer" l'événement mouseup au navigateur. Comme vous pouvez le dire, je ne suis pas trop familier avec js!

Toute aide appréciée.

Answer 1

Votre correcte. La solution consiste simplement à créer une variable d'indicateur qui chaque fois que l'utilisateur fait glisser la chronologie, (event.preventDefault()) les balises d'ancrage. Cette solution pourrait poser plus d'erreurs cependant parce que si l'utilisateur "accidentellement" traîne légèrement le calendrier mais ce qu'il/elle veut est cliquer sur le lien? le calendrier pourrait ne plus être aussi réactif.

Ma suggestion est, empêcher par défaut toutes les balises d'ancrage, puis double-cliquez pour visiter un lien particulier.

Answer 2

Vous pouvez arrêter tous les événements en javascript (framework jQuery par exemple) lorsque la souris clique sur un lien. Event.stop() Vous pouvez essayer ceci ou vous pouvez programmer que lorsque le curseur est sur le lien, attendez un instant pour l'activer.

Answer 3

Vous voulez probablement stocker les coordonnées lors d'un événement mousedown est déclenchée, et lire les coordonnées dans votre mouseup pour voir si elles ont changé d'une quantité importante. Quirksmode a assez bonne documentation sur les coordonnées de lecture des événements de souris:

http://www.quirksmode.org/js/events_properties.html