Move the mouse pointer to a specific position?

问题:

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?

回答1:

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!

回答2:

You cannot move the mousepointer with javascript.

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

1. User thinks: \"hey I\'d like to click this link\"
2. Javascript moves mousecursor to another link
3. User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy

回答3:

1. Run a small web server on the client machine. Can be a small 100kb thing. A Python / Perl script, etc.
2. Include a small, pre-compiled C executable that can move the mouse.

3. 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&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.

回答4:

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

回答5:

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

回答6:

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

回答7:

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_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

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

回答8:

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.

回答9:

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.