Mauszeiger an eine bestimmte Position bewegen?

127

Ich baue ein HTML5-Spiel und versuche, den Mauszeiger über ein bestimmtes Steuerelement auf ein bestimmtes Ereignis zu bewegen, damit das Bewegen in eine bestimmte Richtung immer das gleiche Ergebnis erzielt. Ist das möglich?

Dennkster
quelle
Wenn ich das richtig verstehe, möchten Sie den Mauszeiger mit JS bewegen - dies ist nicht möglich. Sie müssen einen anderen Weg finden.
dreißig Punkte
1
HTML5 hat einige neue Mausereignisse, aber nichts, was die Maus bewegen könnte. Sie könnten immer window.moveBy (x, y); das Fenster darunter zu bewegen, wo die Maus schwebt .. das wäre ein ziemlich funky Spiel :) Die einzige andere Möglichkeit, wie ich es sehe, ist über ActiveX - ewwww, yuk!
Jeremy Thompson
1
Nein - JavaScript lässt Sie das nicht zu, aber ich denke, es könnte eine Problemumgehung geben, bei der die Seite an eine bestimmte Position verschoben wird, die auch den Cursor mithilfe des Fensters scrollTo () "bewegt" - siehe w3Schools unter w3schools.com/jsref/met_win_scrollto.asp .
Stardust
1
Viel Glück beim Bewegen der Maus auf Smartphones.
Cœur
Das Bild eines Mauszeigers kann verschoben und der Cursor gesetzt werden: keine. Es ist kein Sicherheitsrisiko, da Sie der Programmierer sind. Wenn Sie ein Spiel erstellen können, können Sie auch das Risiko vermeiden, während Sie Ihr Spiel spielen, auf Ihr Bankkonto zu klicken.

Antworten:

20

Ich weiß, dass dies ein altes Thema ist, aber ich werde zuerst sagen, dass es nicht möglich ist. Das derzeit nächstgelegene ist, die Maus an einer einzelnen Position zu fixieren und Änderungen in x und y zu verfolgen. Dieses Konzept wurde - wie es aussieht - von Chrome und Firefox übernommen. Es wird von der sogenannten Maussperre verwaltet , und wenn Sie die Fluchttaste drücken , wird es zerstört. Nach meiner kurzen Lektüre besteht die Idee darin, die Maus an einer Stelle zu sperren und Bewegungsereignisse zu melden, die Click-and-Drag-Ereignissen ähneln.

Hier ist die
Versionsdokumentation: FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Und hier ist eine hübsche Demonstration: http://media.tojicode.com/q3bsp/

Codesmith
quelle
Ich nehme dies als die neu akzeptierte Antwort, da dies genau der Anwendungsfall ist, nach dem ich gefragt habe, obwohl er nicht in allen Browsern unterstützt wird.
Dennkster
186

Sie können den Mauszeiger nicht mit Javascript verschieben.

Denken Sie nur eine Sekunde über die Auswirkungen nach, wenn Sie könnten;)

  1. Benutzer denkt: "Hey, ich möchte auf diesen Link klicken"
  2. Javascript bewegt den Mauszeiger zu einem anderen Link
  3. Der Benutzer klickt auf den falschen Link und lädt versehentlich Malware herunter, die sein C-Laufwerk formatiert und seine Süßigkeiten isst
Martin Jespersen
quelle
74
ECHTES Clickjacking.
Mixer
15
Kommen Sie und denken Sie darüber nach, das wäre großartig: P
Martin Jespersen
24
Heh, ich würde es hassen, um die Kontrolle über meinen Mauszeiger zu kämpfen: BACK YOU ADVERTISEMENTS, BACK I SAY!
Blender
77
Eine Webseite kann einen Download erzwingen, ohne dass jemand auf einen Link klicken muss. Was Sie also behaupten, ist nicht wirklich ein Sicherheitsproblem. Es ist jedoch nicht möglich, sich außerhalb des Webseitenfensters zu bewegen.
Dionyziz
11
@dionyziz: Es gibt einen ziemlich großen Unterschied zwischen dem erzwungenen Herunterladen in eine Sandbox und dem anschließenden Herunterladen des Benutzerraums durch Benutzerinteraktion. Die Auswirkungen auf die Sicherheit sind tatsächlich sehr groß.
Martin Jespersen
87
  1. Führen Sie einen kleinen Webserver auf dem Clientcomputer aus. Kann eine kleine 100kb Sache sein. Ein Python / Perl-Skript usw.
  2. Fügen Sie eine kleine, vorkompilierte ausführbare C- Datei hinzu, die die Maus bewegen kann.
  3. Führen Sie es als CGI-Skript über einen einfachen http-Aufruf, AJAX, aus - mit den Koordinaten, zu denen Sie die Maus bewegen möchten, z.

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

PS: Für jedes Problem gibt es Hunderte von Ausreden, warum und wie - es kann und sollte nicht - getan werden. Aber in diesem unendlichen Universum ist es wirklich nur eine Frage der Entschlossenheit - ob SIE wird es möglich machen.

Alex Gray
quelle
13
Ich denke, wir waren alle an Bord, bis "c ausführbar" ... xD
dGRAMOP
1
ein Webserver? Vielleicht meinst du ein Programm mit einer http-Schnittstelle. Keine Notwendigkeit für das Web. Die Programmiersprache Go kann gegenüber C insofern vorteilhaft sein, als sie das Hinzufügen des http-Teils erleichtert, oder alternativ würde der NodeJS-Interpreter Code ausführen, der auch eine http-Schnittstelle enthalten könnte, da der NodeJS-Interpreter so aufgebaut ist, dass er es einfach macht Serveranwendungen schreiben.
Barlop
3
C = 0 Abhängigkeiten. Web ist http. Keine süße Homepage, hier .. Nur der Transport.
Alex Gray
+1 für PS. Können wir CGI-Aufrufe mit dem Knoten dev-server oder einem ähnlichen npmjs.com/package/http-server ausführen ?
ATHER
Hat jemand von euch jemals das JavascriptTag unter der Frage bemerkt ?
80

Ich würde mir vorstellen, dass Sie den Mauszeiger auf einen bestimmten Bereich des Bildschirms setzen könnten, wenn Sie nicht den echten (System-) Mauszeiger verwenden würden.

Sie können beispielsweise ein Bild erstellen, das anstelle Ihres Cursors fungiert, ein Ereignis behandeln, das beim Erkennen des Mauszeigers in Ihrer Szene den Stil des Systemcursors auf "none" ( sceneElement.style.cursor = 'none') setzt und dann ein ausgeblendetes Bildelement aufruft als Cursor an einer beliebigen Stelle in der Szene, basierend auf einer vordefinierten Achsen- / Begrenzungsrahmenübersetzung.

Auf diese Weise behält Ihre Übersetzungsmethode unabhängig davon, wie Sie den realen Cursor bewegt haben, Ihren Bildcursor dort, wo Sie ihn benötigen.

Bearbeiten: Ein Beispiel in jsFiddle mit einer Bilddarstellung und erzwungener Mausbewegung

Xaxis
quelle
5
Ja, du kannst. Sie setzen einfach den Cursor-Stil für ein bestimmtes Element auf "keine". Versuche es.
Xaxis
14
Dies ist die nachdenklichste Antwort. Und bietet tatsächlich eine echte Lösung, während einige andere Antworten wirklich einen Mehrwert bieten :) Aber wie wird Webgl interessante Spiele wie FPS usw. bringen, wenn wir keine
Maussperre
3
Das hat immer noch das Problem, dass Sie Ihre Maus nicht weiter nach links bewegen können. Sobald die Maus die Webseite verlässt, können Sie sie nicht mehr weiter steuern.
Dionyziz
2
Dies ist eine perfekte Lösung für dieses Problem. Der einzige Grund, warum sich Leute beschweren, ist, dass dies keine triviale Lösung ist. Manchmal muss man programmieren, Leute!
Marty
5
spielte mit dieser Idee herum und machte ein Beispiel in JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt
65

Gute Frage. Dies fehlt wirklich in der Javascript-Browser-API. Ich arbeite auch mit meinem Team an einem WebGL-Spiel, und wir brauchen diese Funktion. Ich habe ein Problem mit Firefox Bugzilla eröffnet, damit wir über die Möglichkeit sprechen können, eine API zu haben, die das Sperren von Mäusen ermöglicht. Dies wird für alle HTML5 / WebGL-Spieleentwickler nützlich sein.

Wenn Sie möchten, kommen Sie vorbei und hinterlassen Sie einen Kommentar mit Ihrem Feedback und stimmen Sie dem Problem zu:

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

Vielen Dank!

Dionyziz
quelle
9
Update: bugzilla.mozilla.org/show_bug.cgi?id=633602 und die w3-Spezifikation für die Zeigersperre: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Chris Anderson
51
In diesem Fall beende ich die Verwendung eines Browsers. :-P Im Ernst, Websites erfordern einfach nicht die Art von Zustimmung, die Sie bei der Installation einer Anwendung erteilen. Dies wäre eine großartige Funktion, wenn wir alle nette Leute wären, die nur diese Kontrolle einsetzen, um die Benutzererfahrung zu verbessern. Leider ist das Internet zentral für Arschlöcher, weshalb es viele wirklich nette Funktionen gibt, die wir hoffentlich nie in einem Browser sehen werden. Davon abgesehen: Die Vollbild-API würde den Rest des Betriebssystems "sperren".
Jemand
4
@Someone Consent wird angefordert, bevor eine solche Sperre von einer Anwendung möglich ist (ähnlich wie die Einwilligung im Vollbildmodus jetzt in gängigen Webbrowsern angefordert wird). Darüber hinaus kann der Benutzer die Einwilligung jederzeit durch Drücken der ESC-Taste widerrufen.
Dionyziz
7
Es ist passiert. Und es ist ziemlich großartig (wenn immer noch vom Hersteller vorangestellt): mdn.github.io/pointer-lock-demo
ericsoco
1
@ericsoco Leider ist dieser Link unterbrochen. Dies könnte helfen: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden
46

Sie können die Position des Mauszeigers erkennen und dann die Webseite (mit relativer Körperposition) so verschieben, dass sie über dem Mausklick liegt, auf den sie klicken sollen.

Zum Beispiel können Sie diesen Code auf der aktuellen Seite in Ihrer Browserkonsole einfügen (und anschließend aktualisieren).

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'
    });        
});
Amish G.
quelle
2
Ihr Beitrag wäre wertvoller, wenn Sie ein Codebeispiel veröffentlichen könnten, das dies tut. Außerdem empfehle ich Ihnen, einen Blick auf die FAQ zu werfen
ForceMagic
Wie klickt man tatsächlich auf das richtige Element, wenn der Benutzer klickt?
mmm
@momomo Sie können verwendendocument.getElementByID('thingtoclick').click();
Cascading-Stil
1
Das war total großartig! Über den Tellerrand hinaus denken! Ich bezweifle, dass es wirklich das bietet, was der Fragesteller wollte, aber so cool es auch war, wen interessiert das wirklich?
gcdev
12

Sie können eine Maus nicht bewegen, sondern sperren. Hinweis: Sie müssen requestPointerLock im Klickereignis aufrufen.

Kleines Beispiel:

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

Dokumentation und vollständiges Codebeispiel:

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

Dmitry Bosikov
quelle
4

Sie können den Mauszeiger nicht mit Javascript bewegen, daher aus offensichtlichen Sicherheitsgründen. Der beste Weg, um diesen Effekt zu erzielen, besteht darin, das Steuerelement tatsächlich unter dem Mauszeiger zu platzieren.

Sheavi
quelle
1
Die Auswirkungen auf die Sicherheit sind alles andere als offensichtlich. Tatsächlich führen die jüngsten Ergänzungen von Standards diese Fähigkeit ohne ernsthafte Sicherheitsprobleme ein.
Dionyziz
Aber wie ist es dann in der Drag & Drop-API möglich?
Oldboy
0

Könnte dies nicht einfach dadurch erreicht werden, dass die tatsächliche Position des Mauszeigers ermittelt und dann Sprite- / Szenen-Mausaktionen basierend auf dieser Kompensation berechnet und kompensiert werden?

Zum Beispiel muss der Mauszeiger unten in der Mitte sein, aber er befindet sich oben links. Blenden Sie den Cursor aus und verwenden Sie ein verschobenes Cursorbild. Verschieben Sie die Cursorbewegung und ordnen Sie die Mauseingaben so zu, dass sie den neu positionierten Cursor-Sprite- (oder 'Steuerungs-') Klicks entsprechen. Wenn / wenn Grenzen erreicht werden, berechnen Sie neu. Wenn der Cursor tatsächlich den gewünschten Punkt erreicht, entfernen Sie die Kompensation.

Haftungsausschluss, kein Spieleentwickler.

Eric Shoberg
quelle
Im Wesentlichen identisch mit der Antwort von Xaxis.
Mathheadinclouds
@mathheadinclouds zwar, ist aber unabhängig von der Browser-Implementierung der Maussperre. Also im Wesentlichen; aber nicht. Danke für deine Meinung. - Bearbeitet: Egal. Ich verstehe, was du sagst. Ich denke dann, mein einziger Gedanke wäre, das hier ist nicht unbrauchbar. Es gibt mehr Laien als die Antwort von Xaxis.
Eric Shoberg