Déplacez le pointeur de la souris vers une position spécifique?


127

Je construis un jeu HTML5 et j'essaie de placer le curseur de la souris sur un certain contrôle sur un événement spécifique afin que se déplacer dans une direction spécifique ait toujours le même résultat. Est-ce possible?


Si je comprends bien, vous souhaitez déplacer le curseur de la souris à l'aide de JS - ce n'est pas possible. Vous devrez trouver un autre moyen.
trentenaire

1
HTML5 a quelques nouveaux événements de souris mais rien pour déplacer la souris. Vous pouvez toujours window.moveBy (x, y); pour déplacer la fenêtre en dessous où la souris plane ... ce serait un jeu assez funky :) La seule façon othadox que je vois faire est via ActiveX - ewwww, yuk!
Jeremy Thompson

1
Non - JavaScript ne vous permettra pas de faire cela, mais je suppose qu'il pourrait y avoir une solution de contournement qui consiste à déplacer la page vers un emplacement spécifique, qui "déplacerait" le curseur également, en utilisant la fenêtre scrollTo () - voir w3Schools à w3schools.com/jsref/met_win_scrollto.asp .
Stardust

1
Bonne chance pour déplacer la souris sur les smartphones.
Cœur

L'image d'un pointeur de souris peut être déplacée et définir le curseur: aucun. Ce n'est pas un risque de sécurité car vous êtes le programmeur. Si vous pouvez créer un jeu, vous pouvez également éviter le risque de cliquer sur votre compte bancaire pendant que vous jouez à votre jeu.

Réponses:


20

Donc, je sais que c'est un vieux sujet, mais je dirai d'abord que ce n'est pas possible. La chose la plus proche actuellement est de verrouiller la souris sur une seule position et de suivre les changements dans ses x et y. Ce concept a été adopté par - on dirait - Chrome et Firefox. Il est géré par ce qu'on appelle le verrouillage de la souris , et frapper la fuite le cassera. D'après ma brève lecture, je pense que l'idée est qu'elle verrouille la souris à un emplacement et signale les événements de mouvement similaires aux événements de clic et de glisser.

Voici la documentation de la version:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Et voici une jolie démonstration: http://media.tojicode.com/q3bsp/


Je prends cela comme la nouvelle réponse acceptée, car c'est exactement le cas d'utilisation que je demandais, même si ce n'est pas pris en charge dans tous les navigateurs.
Dennkster

188

Vous ne pouvez pas déplacer le pointeur de la souris avec javascript.

Pensez juste aux implications pendant une seconde, si vous le pouvez;)

  1. L'utilisateur pense: "hé, je voudrais cliquer sur ce lien"
  2. Javascript déplace le curseur de la souris vers un autre lien
  3. L'utilisateur clique sur le mauvais lien et télécharge par inadvertance un logiciel malveillant qui formate son lecteur C et mange ses bonbons

74
REAL clickjacking.
Blender

15
À bien y penser, ce serait génial: P
Martin Jespersen

24
Hé, je détesterais me battre pour le contrôle du curseur de ma souris: RETOUR VOUS PUBLICIT, RETOUR JE DIS!
Blender

78
Une page Web peut forcer un téléchargement sans obliger personne à cliquer sur un lien, donc ce que vous prétendez n'est pas vraiment un problème de sécurité. Cependant, il est impossible de sortir de la fenêtre de la page Web.
dionyziz le

11
@dionyziz: Il y a une grande différence entre le téléchargement forcé dans un bac à sable et le téléchargement de l'espace utilisateur démarré par l'interaction de l'utilisateur. Les implications pour la sécurité sont en fait très importantes.
Martin Jespersen

88
  1. Exécutez un petit serveur Web sur l'ordinateur client. Cela peut être une petite chose de 100 Ko. Un script Python / Perl, etc.
  2. Inclut un petit exécutable C pré-compilé qui peut déplacer la souris.
  3. Exécutez-le comme un script CGI via un simple appel http, AJAX, peu importe - avec les coordonnées vers lesquelles vous voulez déplacer la souris, par exemple:

    http://localhost:9876/cgi/mousemover?x=200&y=450

PS: Pour tout problème, il y a des centaines d'excuses pour expliquer pourquoi, et comment - cela ne peut pas et ne devrait pas - être fait. Mais dans cet univers infini, c'est vraiment juste une question de détermination - de savoir si VOUS va y arriver.


13
Je pense que nous étions tous à bord jusqu'à ce que "c executable" ... xD
dGRAMOP

1
un serveur Web? peut-être voulez-vous dire un programme avec une interface http .. pas besoin de web. Le langage de programmation Go peut être avantageux par rapport au C en ce sens qu'il peut faciliter l'ajout de la partie http, ou bien l'interpréteur nodejs exécuterait assez facilement du code qui pourrait également inclure une interface http, car l'interpréteur nodejs est conçu pour le rendre facile à écrire des applications serveur.
barlop

3
C = 0 dépendances. Le Web est http. Pas de jolie page d'accueil, ici .. Juste le transport.
Alex Gray

+1 pour PS. Pouvons-nous exécuter des appels CGI en utilisant node dev-server ou quelque chose de similaire npmjs.com/package/http-server ??
ATHER

1
Quelqu'un parmi vous a-t-il déjà remarqué la Javascriptbalise sous la question?

80

J'imagine que vous pourriez réussir à placer le curseur de la souris sur une zone donnée de l'écran si vous n'utilisez pas le véritable curseur de la souris (système).

Par exemple, vous pouvez créer une image pour agir à la place de votre curseur, gérer un événement qui, lors de la détection de l'entrée de la souris dans votre scène, définir le style du curseur système sur `` aucun '' ( sceneElement.style.cursor = 'none'), puis faire apparaître un élément d'image caché agissant en tant que curseur pour être n'importe où dans la scène en fonction d'une translation d'axe / cadre de délimitation prédéfinie.

De cette façon, quelle que soit la façon dont vous avez déplacé le curseur réel, votre méthode de traduction conservera votre curseur d'image là où vous en avez besoin.

edit: un exemple dans jsFiddle utilisant une représentation d'image et un mouvement forcé de la souris


5
Oui, vous pouvez. Vous définissez simplement le style du curseur sur un élément donné sur «aucun». Essaie.
Xaxis

14
C'est la réponse la plus réfléchie. Et fournit en fait une vraie solution, tandis que d'autres réponses ajoutent vraiment de la valeur :) Mais comment webgl apportera-t-il des jeux intéressants comme FPS, etc. quand nous ne pouvons pas verrouiller la souris, cela semble assez limitant ...
Dennkster

3
Cela pose toujours le problème de ne pas pouvoir "continuer à déplacer" votre souris vers la gauche. Une fois que la souris quitte la page Web, vous ne pouvez plus continuer à la contrôler.
dionyziz le

2
C'est une solution parfaite à ce problème. La seule raison pour laquelle des gens se plaignent, c'est que ce n'est pas une solution triviale. Il faut parfois faire de la programmation les gars!
Marty

5
joué avec cette idée et fait un exemple dans JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt

65

Excellente question. C'est vraiment quelque chose qui manque dans l'API du navigateur Javascript. Je travaille également sur un jeu WebGL avec mon équipe et nous avons besoin de cette fonctionnalité. J'ai ouvert un numéro sur le bugzilla de Firefox afin que nous puissions commencer à parler de la possibilité d'avoir une API pour permettre le verrouillage de la souris. Cela sera utile pour tous les développeurs de jeux HTML5 / WebGL.

Si vous le souhaitez, venez laisser un commentaire avec vos commentaires et évaluez le problème:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

Merci!


9
Mise à jour: bugzilla.mozilla.org/show_bug.cgi?id=633602 et la spécification w3 pour le verrouillage du pointeur: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Chris Anderson

51
Si cela se produit, je quitterai en utilisant un navigateur. :-P Sérieusement, les sites Web ne nécessitent tout simplement pas le type de consentement que vous donnez lorsque vous installez une application. Ce serait une excellente fonctionnalité si nous étions tous des gars sympas utilisant simplement ce niveau de contrôle pour améliorer l'expérience utilisateur. Malheureusement, Internet est central, c'est pourquoi il y a beaucoup de fonctionnalités vraiment intéressantes que nous espérons ne jamais voir dans un navigateur. Cela étant dit: l'API plein écran fonctionnerait pour "verrouiller" le reste du système d'exploitation.
Quelqu'un

4
Le consentement @Someone serait demandé avant qu'un tel verrouillage ne soit possible par une application (semblable à la façon dont le consentement en plein écran est demandé maintenant dans les navigateurs Web populaires). De plus, l'utilisateur peut toujours révoquer son consentement en appuyant sur la touche ESC.
dionyziz

7
C'est arrivé. Et c'est assez génial (si toujours préfixé par le fournisseur): mdn.github.io/pointer-lock-demo
ericsoco

1
@ericsoco Malheureusement, ce lien est rompu. Cela pourrait aider: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden

46

Vous pouvez détecter la position du pointeur de la souris, puis déplacer la page Web (avec la position du corps relative) pour qu'elle survole ce sur quoi vous voulez qu'il clique.

Pour un exemple, vous pouvez coller ce code sur la page actuelle dans la console de votre navigateur (et actualiser par la suite)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});

2
Votre message serait plus précieux si vous pouviez publier un exemple de code qui le fait. Aussi, je vous suggère de jeter un œil à la FAQ: stackoverflow.com/faq
ForceMagic

Comment cliquez-vous réellement sur le bon élément une fois que l'utilisateur clique?
mmm

@momomo Vous pouvez utiliserdocument.getElementByID('thingtoclick').click();
cascade le

1
C'était totalement génial! Façon de sortir des sentiers battus! Je doute que cela fournisse vraiment ce que le questionneur voulait, mais aussi cool soit-il, qui s'en soucie vraiment?
gcdev

12

Vous ne pouvez pas déplacer une souris, mais vous pouvez la verrouiller. Remarque: vous devez appeler requestPointerLock dans l'événement click.

Petit exemple:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

Documentation et exemple de code complet:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API


4

Vous ne pouvez pas déplacer le pointeur de la souris en javascript, et donc pour des raisons de sécurité évidentes. La meilleure façon d'obtenir cet effet serait de placer le contrôle sous le pointeur de la souris.


1
Les implications sécuritaires sont loin d'être évidentes. En fait, les ajouts récents aux normes introduisent cette capacité sans aucun problème de sécurité sérieux.
dionyziz

mais alors comment est-ce possible dans l'API glisser-déposer?
oldboy

0

Cela ne pourrait-il pas simplement être fait en obtenant la position réelle du pointeur de la souris, puis en calculant et en compensant les actions de la souris sprite / scène en fonction de cette compensation?

Par exemple, vous avez besoin que le pointeur de la souris soit en bas au centre, mais il se trouve en haut à gauche; cachez le curseur, utilisez une image de curseur décalée. Décalez le mouvement du curseur et mappez l'entrée de la souris pour correspondre aux clics de sprite (ou de «contrôle») de curseur repositionnés. Quand / si des limites sont atteintes, recalculez. Si / quand le curseur atteint réellement le point souhaité, supprimez la compensation.

Avertissement, pas un développeur de jeux.


identique à la réponse Xaxis, essentiellement.
mathheadinclouds

@mathheadinclouds en effet, mais est indépendant de l'implémentation par le navigateur du verrouillage de la souris. Donc, essentiellement; mais non. Merci pour votre avis. - Modifié: tant pis. Je vois ce que tu dis. Je suppose donc, ma seule pensée serait, ce n'est pas inutile. Il y a plus de profane que la réponse Xaxis.
Eric Shoberg

0

Intéressant. Ce n'est pas directement possible pour les raisons évoquées précédemment (clics de spam et injection de malware), mais considérez ce hack, qui crée une impression de la même chose:

Étape 1: masquer le curseur

Disons que vous avez un div, vous pouvez utiliser cette propriété css pour masquer le vrai curseur:

.your_div {
    cursor: none
}

Étape 2: Introduisez un pseudo curseur

Créez simplement une image, un curseur similaire, et placez-le dans votre page Web, avec position = 'absolute'.

Étape 3: Suivez le mouvement réel de la souris

C'est facile. Vérifiez sur Internet comment obtenir l'emplacement réel de la souris (coordonnées X et Y).

Étape 4: Déplacez le pseudo curseur

Au fur et à mesure que le curseur se déplace, déplacez votre pseudo-curseur de la même différence X et Y. De même, vous pouvez toujours générer un événement de clic à n'importe quel endroit de votre page Web avec javascript magic (il suffit de rechercher sur Internet pour savoir comment faire).

Maintenant, à ce stade, vous pouvez contrôler le curseur pesudo comme vous le souhaitez, et votre utilisateur aura l'impression que le véritable curseur se déplace.

====

Avertissement juste: ne le faites pas. Personne ne veut que son curseur ou son ordinateur soit contrôlé de cette manière, sauf si vous avez un cas d'utilisation spécifique ou si vous êtes déterminé à fuir vos utilisateurs.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.