Mover o ponteiro do mouse para uma posição específica?

127

Estou construindo um jogo HTML5 e estou tentando colocar o cursor do mouse sobre um determinado controle em um evento específico, para que mover em uma direção específica sempre tenha o mesmo resultado. Isso é possível?

Dennkster
fonte
Se bem entendi, você deseja mover o cursor do mouse usando JS - isso não é possível. Você precisará encontrar outra maneira.
thirtydot
1
O HTML5 possui alguns novos eventos de mouse, mas nada para mover o mouse. Você sempre pode window.moveBy (x, y); mover a janela embaixo de onde o mouse paira ... seria um jogo bem divertido :) A única maneira de othadox que vejo sendo feita é através do ActiveX - ewwww, yuk!
Jeremy Thompson
1
Não - o JavaScript não permitirá que você faça isso, mas acho que pode haver uma solução alternativa que envolva mover a página para um local específico, que "mova" o cursor também, usando a janela scrollTo () - consulte w3Schools em w3schools.com/jsref/met_win_scrollto.asp .
Stardust
1
Boa sorte ao mover o mouse em smartphones.
Cœur
A imagem de um ponteiro do mouse pode ser movida e definir o cursor: nenhum. Não é um risco de segurança porque você é o programador. Se você pode fazer um jogo, também pode evitar o risco de clicar na sua conta bancária enquanto estiver jogando.

Respostas:

20

Então, eu sei que esse é um tópico antigo, mas primeiro direi que não é possível. O mais próximo atualmente é travar o mouse em uma única posição e acompanhar as alterações nos seus x e y. Este conceito foi adotado pelo - parece - Chrome e Firefox. Ele é gerenciado pelo chamado Mouse Lock , e pressionar Escape irá quebrá-lo. Pela minha breve leitura, acho que a idéia é que ele bloqueie o mouse em um local e relate eventos de movimento semelhantes aos eventos de clicar e arrastar.

Aqui está a documentação da versão:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

E aqui está uma demonstração bastante interessante: http://media.tojicode.com/q3bsp/

Codesmith
fonte
Estou tomando isso como a nova resposta aceita, porque esse é exatamente o caso de uso que eu estava solicitando, mesmo que não seja suportado em todos os navegadores.
Dennkster
187

Você não pode mover o ponteiro do mouse com javascript.

Basta pensar nas implicações por um segundo, se você puder;)

  1. O usuário pensa: "ei, eu gostaria de clicar neste link"
  2. Javascript move o mouse para outro link
  3. O usuário clica no link errado e, inadvertidamente, baixa malware que formata seu c-drive e come seu doce
Martin Jespersen
fonte
74
REAL clickjacking.
Blender
15
Venha para pensar sobre isso, isso seria incrível: P
Martin Jespersen
24
Heh, eu odiaria lutar pelo controle sobre o cursor do mouse: VOLTAR VOCÊ PUBLICIDADES, VOLTAR DIZENDO!
Blender
78
Uma página da Web pode forçar um download sem exigir que alguém clique em um link. Portanto, o que você alega não é realmente um problema de segurança. Ser incapaz de sair da janela da página é, no entanto.
Dionyziz 02/02
11
@dionyziz: Há uma grande diferença entre o download forçado em uma sandbox e o download do espaço do usuário iniciado pela interação do usuário. As implicações de segurança são realmente muito grandes.
Martin Jespersen
88
  1. Execute um pequeno servidor web na máquina cliente. Pode ser uma coisa pequena de 100kb. Um script Python / Perl, etc.
  2. Inclua um pequeno executável C pré-compilado que possa mover o mouse.
  3. Execute-o como um script CGI através de uma simples chamada http, AJAX, o que for - com as coordenadas para as quais você deseja mover o mouse, por exemplo:

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

PS: Para qualquer problema, existem centenas de desculpas por que, e como - não pode e não deve - ser feito. Mas neste universo infinito, é realmente apenas uma questão de determinação - se você vai fazer isso acontecer.

Alex Gray
fonte
13
Acho que estávamos todos a bordo até "c executável" ... xD
dGRAMOP
1
um servidor web? talvez você queira dizer um programa com uma interface http .. não há necessidade de web. A linguagem de programação Go pode ser vantajosa em relação ao C, pois pode facilitar a adição da parte http ou, alternativamente, o interpretador nodejs executaria código que também poderia incluir uma interface http com bastante facilidade, pois o interpretador nodejs foi criado para facilitar a escrever aplicativos de servidor.
24517 barlop
3
C = 0 dependências. Web é http. Nenhuma página inicial fofa, aqui .. Apenas o transporte.
Alex Gray
+1 para PS. Podemos executar chamadas CGI usando o nó dev-server ou algo semelhante npmjs.com/package/http-server ?
ATHER 29/04
1
Alguém já reparou na Javascriptetiqueta abaixo da pergunta?
80

Eu imagino que você poderia colocar o cursor do mouse em uma determinada área da tela se não usasse o cursor do mouse real (do sistema).

Por exemplo, você pode criar uma imagem para atuar no lugar do seu cursor, manipular um evento que, ao detectar o mouse entrar em sua cena, definir o estilo no cursor do sistema como 'none' (sceneElement.style.cursor = 'none' ), exibir um elemento de imagem oculto como um cursor para estar em qualquer lugar da cena, com base em uma tradução predefinida de eixos / caixas delimitadoras.

Dessa forma, não importa como você moveu o cursor real, seu método de tradução manterá o cursor da imagem onde você precisar.

editar: um exemplo no jsFiddle usando uma representação de imagem e movimento forçado do mouse

Xaxis
fonte
5
Sim você pode. Você simplesmente define o estilo do cursor em um determinado elemento como 'none'. De uma chance.
Xaxis
14
Esta é a resposta mais ponderada. E, na verdade, fornece uma solução real, enquanto algumas outras respostas dot realmente adicionar qualquer valor :) Mas como WebGL trazer jogos interessantes, como FPS etc quando não podemos obter qualquer bloqueio rato, isso soa muito limitantes ...
Dennkster
3
Isso ainda tem o problema de não ser capaz de "continuar movendo" o mouse para a esquerda. Depois que o mouse sai da página, você não pode mais controlá-lo.
Dionyziz 02/02
2
Esta é uma solução perfeita para esse problema. A única razão pela qual há pessoas reclamando é porque não é uma solução trivial. Você tem que fazer algumas programações as vezes pessoal!
28713 Marty
5
brinquei com essa idéia e fez um exemplo no jsFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt
65

Ótima pergunta. Isso realmente está faltando na API do navegador Javascript. Também estou trabalhando em um jogo WebGL com minha equipe e precisamos desse recurso. Abri um problema no bugzilla do Firefox para que pudéssemos começar a falar sobre a possibilidade de ter uma API para permitir o bloqueio do mouse. Isso será útil para todos os desenvolvedores de jogos HTML5 / WebGL por aí.

Se você quiser, venha e deixe um comentário com seu feedback e atualize o problema:

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

Obrigado!

dionyziz
fonte
9
Atualização: bugzilla.mozilla.org/show_bug.cgi?id=633602 e a especificação w3 para bloqueio de ponteiro: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Chris Anderson
51
Se isso acontecer, eu pararei de usar um navegador. :-P Sério, os sites simplesmente não exigem o tipo de consentimento que você está dando ao instalar um aplicativo. Esse seria um ótimo recurso se todos nós formos legais, apenas empregando esse nível de controle para melhorar a experiência do usuário. Infelizmente, a Internet é central, é por isso que existem muitos recursos realmente interessantes que esperamos nunca ver em um navegador. Dito isto: a API de tela cheia funcionaria para "bloquear" o restante do sistema operacional.
Alguém
4
O @Someone Consent seria solicitado antes que tal bloqueio fosse possível por um aplicativo (semelhante à forma como o consentimento em tela cheia é solicitado agora em navegadores populares). Além disso, o usuário sempre pode revogar o consentimento pressionando a tecla ESC.
Dionyziz 02/11
7
Aconteceu. E é bastante impressionante (se ainda prefixar o
ericsoco
1
@ericsoco Infelizmente esse link está quebrado. Isso pode ajudar: https://developer.mozilla.org/pt-BR/docs/Web/API/Pointer_Lock_API
Tian van Heerden
46

Você pode detectar a posição do ponteiro do mouse e mover a página da Web (com a posição do corpo relativa) para que eles passem o mouse sobre o que você deseja que eles cliquem.

Por exemplo, você pode colar esse código na página atual no console do navegador (e atualizar posteriormente)

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'
    });        
});
Amish G
fonte
2
Sua postagem seria mais valiosa se você pudesse postar um exemplo de código que faça isso. Além disso, sugiro que você dê uma olhada nas perguntas frequentes: stackoverflow.com/faq
ForceMagic
Como você realmente clica no elemento certo quando o usuário clica?
mmm
@momomo Você pode usardocument.getElementByID('thingtoclick').click();
cascading-style
1
Isso foi totalmente estelar! Maneira de pensar fora da caixa! Duvido que realmente ofereça o que o interlocutor queria, mas por mais legal que fosse, quem realmente se importa?
Gdev #
12

Você não pode mover um mouse, mas pode bloqueá-lo. Nota: você deve chamar requestPointerLock no evento click.

Exemplo pequeno:

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

Documentação e exemplo de código completo:

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

Dmitry Bosikov
fonte
4

Você não pode mover o ponteiro do mouse usando javascript e, portanto, por razões óbvias de segurança. A melhor maneira de obter esse efeito seria realmente colocar o controle sob o ponteiro do mouse.

Sheavi
fonte
1
As implicações de segurança estão longe de serem óbvias. De fato, as recentes adições aos padrões introduzem essa capacidade sem problemas sérios de segurança.
Dionyziz
mas como é possível na API de arrastar e soltar?
Oldboy
0

Isso não poderia ser feito simplesmente obtendo a posição real do ponteiro do mouse e calculando e compensando as ações do mouse sprite / cena com base nessa compensação?

Por exemplo, você precisa que o ponteiro do mouse esteja no centro da parte inferior, mas fica no canto superior esquerdo; ocultar o cursor, use uma imagem deslocada do cursor. Mude o movimento do cursor e mapeie a entrada do mouse para corresponder aos cliques reposicionados do sprite do cursor (ou 'controle') Quando / se os limites forem atingidos, recalcule. Se / quando o cursor atingir o ponto desejado, remova a compensação.

Isenção de responsabilidade, não um desenvolvedor de jogos.

Eric Shoberg
fonte
idêntico à resposta Xaxis, essencialmente.
mathheadinclouds
@mathheadinclouds de fato, mas é independente da implementação do navegador do bloqueio do mouse. Então, essencialmente; mas não. Obrigado por sua opinião. - Editado: Não importa. Entendo o que você está dizendo. Acho que então, meu único pensamento seria: isso aqui não é inútil. Há mais leigos nisso do que a resposta Xaxis.
Eric Shoberg 23/11/19