Move the mouse cursor to a specific position?

Question

I am creating an HTML5 game and I am trying to place the mouse cursor over a specific control on a specific event, so moving in a certain direction always has the same result. Is it possible?

Answer 1

Great question. This is really something missing from the Javascript browser API. I am also working on a WebGL game with my team and we need this feature. I discovered a problem in Firefox bugzilla so we can start talking about the possibility of using the API to lock the mouse. This will be useful for all HTML5 / WebGL developers.

If you like, come and leave a comment with your reviews and leave a question:

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

Thank!

Answer 2

You cannot move the mouse using javascript.

Just think about the consequences for a second if you could;)

• The user thinks: "hey, I would like to click this link"
• Javascript moves mousecursor to another link
• The user clicks the wrong link and accidentally downloads malware that formats his c-disk and eats his candy

Answer 3

• Launch a small web server on the client machine. Maybe a small thing 100 KB. Python / Perl script, etc.
• Include a small, pre-compiled C executable that can move the mouse.

• Run it as a CGI script with a simple HTTP call, AJAX, regardless of the coordinates with which you want to move the mouse, for example:

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

PS: For any problem, there are hundreds of excuses as to why and how - this is impossible and should not be done. But in this infinite universe, it really is a matter of determination - how about whether you do it.

Answer 4

I would suggest that you could put the mouse cursor on a given area of ​​the screen if you did not use a real (system) mouse pointer.

For example, you can create an image that acts instead of your cursor, handle an event that, after detecting the mouseenter in your scene, sets the style on the system cursor to "none" ( sceneElement.style.cursor = 'none' ), then there will be a hidden image element, acting like a cursor, was anywhere you like, in the scene, based on a predefined axis / bounding box transformation.

Thus, no matter how you move the real cursor, your translation method will save your image cursor wherever you need it.

edit: example in jsFiddle using image view and forced mouse movement

Answer 5

You can detect the position of the mouse pointer, and then move the web page (with the relative position of the body) so that they hover over what you want them to click.

As an example, you can paste this code on the current page in your browser console (and update it later)

 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' }); }); 

Answer 6

You cannot move the mouse, but you can block it. Note: you must call requestPointerLock in the click event.

A small example:

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

Documentation and full code:

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

Answer 7

So, I know that this is an old topic, but I will first say that it is impossible. The closest thing at the moment is to lock the mouse in one position and track changes in its x and y. This concept was adopted - it seems - by Chrome and Firefox. It is controlled by the so-called mouse blocking , and hitting the exit will break it. From my brief overview, I think the idea is that it locks the mouse in one place and reports motion events similar to click and drag events.

Here is the release documentation:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

And here's a pretty neat demo: http://media.tojicode.com/q3bsp/

Answer 8

You cannot move the mouse cursor using javascript and therefore for obvious security reasons. The best way to achieve this effect was to place the control under the mouse pointer.

Answer 9

Could this not be done simply by setting the actual position of the mouse pointer and then calculating and compensating for the actions of the sprite / scene mouse based on this compensation?

For example, you need the mouse cursor to be the bottom center, but it sits at the top left; hide the cursor, use the shifted image of the cursor. Move the cursor and the map mouse pointer to align the draggable cursor arrows (or "controls"). When / if borders are removed, recount. If / when the cursor actually hits the point where you want, remove the compensation.

Disclaimer, not the game developer.