将鼠标指针移动到特定位置？

我正在构建一个 HTML5游戏，我试图把鼠标光标放在特定事件的特定控件上，这样在特定方向移动总是有相同的结果。这可能吗？

222013 次浏览
小开

不能用 javascript 移动鼠标指针。

如果可以的话，请稍微考虑一下其中的含义;)

  1. 用户想: “嘿，我想点击这个链接”
  2. Javascript 将鼠标移动到另一个链接
  3. 用户点击了错误的链接，无意中下载了恶意软件，格式化了他的 C 盘，并吃掉了他的糖果
小开

您不能使用 javascript 移动鼠标指针，因此出于明显的安全原因。实现此效果的最佳方法是将控件实际放置在鼠标指针下。

小开

我可以想象，如果您不使用真正的(系统)鼠标光标，您可以完成将鼠标光标放置到屏幕的给定区域。

例如，你可以创建一个图像来代替你的光标，处理一个事件，在检测到鼠标进入你的场景时，将系统光标的样式设置为“无”(sceneElement.style.cursor = 'none') ，然后将一个隐藏的图像元素作为一个光标，在场景中的任何你喜欢的地方，基于一个预定义的轴/边框转换。

这样，无论你如何移动真正的光标，你的翻译方法将保持您的图像光标在任何地方，你需要它。

编辑: 在 jsFiddle 中使用图像表示和强制鼠标移动的示例

小开

问得好。这确实是 Javascript 浏览器 API 所缺少的东西。我还在和我的团队一起开发一个 WebGL 游戏，我们需要这个特性。我在 Firefox 的 bugzilla 上打开了一个问题，这样我们就可以开始讨论有一个允许鼠标锁定的 API 的可能性。这对于所有的 HTML5/WebGL 游戏开发者来说都是非常有用的。

如果你愿意，可以过来留下你的反馈意见，并对这个问题进行评论:

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

谢谢！

小开
  1. 在客户端机器上运行一个小型 Web 服务器。可以是一个100kb 的小东西。Python/Perl 脚本，等等。
  2. 包含一个小的、预编译的 C 可以移动鼠标的可执行文件。

  3. 通过一个简单的 http 调用、 AJAX 或者其他什么方式，以 CGI 脚本的形式运行它——使用你想要将鼠标移动到的坐标，例如:

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

PS: 对于任何问题，都有成百上千个理由来解释为什么要这么做，以及怎么做——不能，也不应该这么做。.但是在这个无限的宇宙中，这真的只是一个决心的问题——至于你是否会让它发生。

小开

你可以检测鼠标指针的位置，然后移动网页(与正文位置相对) ，这样它们就会悬停在你想要它们点击的地方。

例如，您可以将此代码粘贴到浏览器控制台中的当前页面(然后刷新)

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'
});
});
小开
最佳答案

所以，我知道这是一个老话题，但我首先要说的是，这是不可能的。目前最接近的方法是将鼠标锁定到单个位置，并跟踪其 x 和 y 的变化。这个概念已经被——看起来像是—— Chrome 和 Firefox 采用了。它是由 鼠标锁控制的，击中逃逸就会破坏它。从我的 简短阅读，我认为这个想法是锁定鼠标到一个位置，并报告运动事件类似于点击和拖动事件。

下面是发布文档: < br/> FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API < br/> Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

这里有一个非常简洁的演示: http://media.tojicode.com/q3bsp/

小开

你不能移动一只老鼠，但可以锁定它。 注意: 必须在 click 事件中调用 requestPointerLock。

小例子:

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

文档和完整代码示例:

Https://developer.mozilla.org/en-us/docs/web/api/pointer_lock_api

小开

这难道不能简单地通过得到鼠标指针的实际位置，然后计算和补偿基于这种补偿的精灵/场景鼠标动作来完成吗？

例如，您需要鼠标指针位于底部中心，但它位于左上方; 隐藏光标，使用移位的光标图像。移动光标移动并映射鼠标输入以匹配重新定位的光标精灵(或“控制”)单击当/如果边界被击中，重新计算。如果/当光标实际到达你想要的点时，删除补偿。

免责声明，我不是游戏开发者。

小开

有意思。由于之前提到的原因(垃圾邮件点击和恶意软件注入) ，这不可能直接实现，但是考虑一下这个黑客行为，它创造了一个相同的印象:

步骤1: 隐藏光标

假设您有一个 div，您可以使用 css 属性来隐藏真正的光标:

.your_div {
cursor: none
}

步骤2: 引入一个伪游标

只需要创建一个类似光标的图像，并将其放在网页中，使用 position:absolute。

步骤3: 跟踪实际的鼠标移动

这很容易。检查互联网上如何得到真正的鼠标位置(X & Y 坐标)。

步骤4: 移动伪光标

当实际光标移动时，按照相同的 X 和 Y 差移动您的伪光标。同样地，你也可以使用 javascript 魔法在网页上的任何位置生成一个单击事件(只需在互联网上搜索 how-to)。

现在，您可以按照自己希望的方式控制伪光标，您的用户将得到真正的光标在移动的印象。

公平警告: 不要这样做。没有人希望他们的光标或计算机以这种方式控制，除非您有一些特定的用例，或者如果您决心逃离您的用户。


提交答案