Javascript 将鼠标指针移动到特定位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4752501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move the mouse pointer to a specific position?
提问by Dennkster
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?
我正在构建一个 HTML5 游戏，我试图将鼠标光标放在特定事件的某个控件上，以便在特定方向上移动始终具有相同的结果。这可能吗？
采纳答案by Codesmith
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 briefread-up, I think the idea is that it locks the mouse to one location, and reports motion events similar to click-and-drag events.
所以，我知道这是一个古老的话题，但我首先要说这是不可能的。目前最接近的是将鼠标锁定到一个位置，并跟踪其 x 和 y 的变化。这个概念已经被 - 看起来 - Chrome 和 Firefox 所采用。它由所谓的Mouse Lock 管理，点击 escape 会破坏它。从我的简短阅读中，我认为这个想法是将鼠标锁定到一个位置，并报告类似于单击和拖动事件的运动事件。
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
这是发布文档：
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/
这是一个非常简洁的演示：http: //media.tojicode.com/q3bsp/
回答by Martin Jespersen
You cannot move the mousepointer with javascript.
您不能使用 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
- 用户认为：“嘿，我想点击这个链接”
- Javascript 将鼠标光标移动到另一个链接
- 用户点击了错误的链接，无意中下载了格式化他的 C 驱动器并吃掉他的糖果的恶意软件
回答by Alex Gray
- 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&y=450
- 在客户端机器上运行一个小型 Web 服务器。可以是 100kb 的小东西。一个 Python / Perl 脚本等。
- 包含一个可以移动鼠标的小型预编译 C可执行文件。
通过简单的 http 调用、AJAX 等将其作为 CGI 脚本运行 - 使用您想要将鼠标移动到的坐标，例如：
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.
PS：对于任何问题，对于为什么，以及如何 - 不能，也不应该 - 有成百上千的借口。但在这个无限的宇宙中，这真的只是一个决定问题 - 至于你是否会让它发生。
回答by Xaxis
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.
例如，您可以创建一个图像来代替您的光标，处理一个事件，当检测到鼠标进入您的场景时，将系统光标上的样式设置为“无”（sceneElement.style.cursor = 'none'），然后将显示一个隐藏的图像元素基于预定义的轴/边界框平移，作为光标位于您喜欢的场景中的任何位置。
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
回答by dionyziz
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.
很好的问题。这确实是 Javascript 浏览器 API 中缺少的东西。我也在和我的团队一起开发 WebGL 游戏，我们需要这个功能。我在 Firefox 的 bugzilla 上打开了一个问题，这样我们就可以开始讨论拥有一个允许鼠标锁定的 API 的可能性。这对所有 HTML5/WebGL 游戏开发人员都有用。
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
https://bugzilla.mozilla.org/show_bug.cgi?id=630979
Thanks!
谢谢！
回答by Amish G
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'
});
});
回答by Dmitry Bosikov
You can't move a mouse but can lock it. Note: that you must call requestPointerLock in click event.
您不能移动鼠标，但可以锁定它。注意：您必须在点击事件中调用 requestPointerLock。
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
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
回答by Sheavi
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 移动鼠标指针，因此出于明显的安全原因。实现此效果的最佳方法是将控件实际放置在鼠标指针下方。
回答by Eric Shoberg
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.
免责声明，不是游戏开发商。
