Move the mouse pointer to a specific position

Question

I m building a HTML5 game and I am trying to put the mouse cursor over a certain control on a specific event so that moving in a specific direction always has the same result  Is this possible

User · Accepted Answer

So  I know this is an old topic  but I ll first say it isn t possible  The closest thing currently is locking the mouse to a single position  and tracking change in its x and y  This concept has been adopted by - it looks like - Chrome and Firefox  It s managed by what s called Mouse Lock  and hitting escape will break it  From my brief read-up  I think the idea is that it locks the mouse to one location  and reports motion events similar to click-and-drag events   Here s the release documentation FireFox  https   developer mozilla org en-US docs Web API Pointer Lock APIChrome  http   www chromium org developers design-documents mouse-lock  And here s a pretty neat demonstration  http   media tojicode com q3bsp

User · Answer

Interesting  This isn t directly possible for the reasons called out earlier  spam clicks and malware injection   but consider this hack  which creates an impression of the same  Step 1  Hide the cursor Let s say you ve a div  you can use this css property to hide the real cursor   your div       cursor  none    Step 2  Introduce a pseudo cursor Simply create an image  a cursor look-alike and place it within your webpage  with position absolute  Step 3  Track actual mouse movement This is easy  Check internet on how to get real mouse location  X  amp  Y coordinates   Step 4  Move the pseudo cursor As the actual cursor move  move your pseudo cursor by same X  amp  Y difference  Similarly  you can always generate a click event at any location on your webpage with javascript magic  just search the internet on how-to   Now at this point  you can control the pesudo cursor the way you want  and your user will get the impression that the real cursor is moving   Fair Warning  Do not do it  No one wants their cursor or computer controlled this way  unless if you ve some specific use-case  or if you are determined to flee your users away

User · Answer

Couldn t this simply be done by getting actual position of the mouse pointer then calculating and compensating sprite scene mouse actions based off this compensation    For instance you need the mouse pointer to be bottom center  but it sits top left  hide the cursor  use a shifted cursor image  Shift the cursor movement and map mouse input to match re-positioned cursor sprite  or  control   clicks When if bounds are hit  recalculate  If when the cursor actually hits the point you want it to be  remove compensation    Disclaimer  not a game developer

User · Answer

You can t move a mouse but can lock it   Note  that you must call requestPointerLock in click event   Small Example   var canvas   document getElementById  mycanvas    canvas requestPointerLock   canvas requestPointerLock    canvas mozRequestPointerLock    canvas webkitRequestPointerLock  canvas requestPointerLock      Documentation and full code example   https   developer mozilla org en-US docs Web API Pointer Lock API

User · Answer

Run a small web server on the client machine   Can be a small 100kb thing   A Python   Perl script  etc  Include a small  pre-compiled C executable that can move the mouse  Run it as a CGI-script via a simple http call  AJAX  whatever - with the coordinates you want to move the mouse to  eg   http   localhost 9876 cgi mousemover x 200 amp y 450   PS  For any problem  there are hundreds of excuses as to why  and how - it can t  and shouldn t - be done   But in this infinite universe  it s really just a matter of determination - as to whether YOU will make it happen

User · Answer

Great question  This is really something missing from the Javascript browser API  I m also working on a WebGL game with my team  and we need this feature  I opened an issue on Firefox s bugzilla so that we can start talking about the possibility of having an API to allow for mouse locking  This is going to be useful for all HTML5 WebGL game developers out there   If you like  come over and leave a comment with your feedback  and upvote the issue   https   bugzilla mozilla org show bug cgi id 630979  Thanks

User · Answer

You could detect position of the mouse pointer and then move the web page  with body position relative  so they hover over what you want them to click   For an example you can paste this code on the current page in your browser console  and refresh afterwards   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

User · Answer

You cannot move the mousepointer with javascript   Just think about the implications for a second  if you could      User thinks   hey I d like to click this link  Javascript moves mousecursor to another link User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy

User · Answer

I would imagine you could accomplish placing the mouse cursor to a given area of the screen if you didn t use the real  system  mouse cursor   For instance  you could create an image to act in place of your cursor  handle an event which upon detecting mouseenter into your scene  set the style on the system cursor to  none   sceneElement style cursor    none    then would bring up a hidden image element acting as a cursor to be anywhere you like with in the scene based on a predefined axis bounding box translation    This way no matter how you moved the real cursor your translation method would keep your image cursor wherever you needed it   edit  an example in jsFiddle using an image representation and forced mouse movement

User · Answer

You can t move the mouse pointer using javascript  and thus for obvious security reasons  The best way to achieve this effect would be to actually place the control under the mouse pointer

[javascript] Move the mouse pointer to a specific position?

Examples related to javascript

Examples related to mouse