마우스 포인터를 특정 위치로 이동 하시겠습니까?


127

HTML5 게임을 제작 중이며 특정 방향으로 이동하면 항상 같은 결과를 얻을 수 있도록 특정 이벤트의 특정 컨트롤 위에 마우스 커서를 놓으려고합니다. 이게 가능해?


올바르게 이해하면 JS를 사용하여 마우스 커서를 움직이고 싶습니다. 불가능합니다. 다른 방법을 찾아야합니다.
thirtydot

1
HTML5에는 새로운 마우스 이벤트가 있지만 마우스를 움직일 필요는 없습니다. 항상 window.moveBy (x, y); 할 수 있습니다 마우스가 움직일 수있는 곳으로 창을 옮기는 것 .. 그것은 꽤 펑키 한 게임 일 것이다.) 내가하는 것을 보는 유일한 이도 톡스 방식은 ActiveX를 통한 것이다-ewwww, yuk!
제레미 톰슨

1
아니요-JavaScript를 사용하면 그렇게 할 수 없지만 페이지를 특정 위치로 이동하고 창 scrollTo ()를 사용하여 커서를 "이동"시키는 해결 방법이있을 수 있습니다 .w3Schools 참조 에서 w3schools.com/jsref/met_win_scrollto.asp .
스타 더스트

1
스마트 폰에서 마우스를 움직이면 행운을 빕니다.
Cœur

마우스 포인터의 이미지를 움직여서 cursor : none을 설정할 수 있습니다. 프로그래머이기 때문에 보안 위험이 아닙니다. 게임을 할 수 있다면 게임을하는 동안 은행 계좌를 클릭 할 위험을 피할 수 있습니다.

답변:


20

그래서 나는 이것이 오래된 주제라는 것을 알고 있지만 먼저 불가능하다고 말할 것입니다. 가장 가까운 것은 현재 마우스를 단일 위치에 고정하고 x와 y의 변화를 추적하는 것입니다. 이 개념은 Chrome과 Firefox처럼 채택되었습니다. 그것은 Mouse Lock 이라는 것으로 관리되며 탈출을 치면 깨질 것입니다. 내에서 간단한이 읽기까지, 나는 생각이 하나 개의 위치에 마우스를 고정, 이벤트 및 드래그 클릭 유사한 모션 이벤트를보고 있다고 생각합니다.

다음은 릴리스 문서입니다 :
파이어 폭스 : https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
크롬 : http://www.chromium.org/developers/design-documents/mouse-lock

그리고 여기 꽤 깔끔한 데모가 있습니다 : http://media.tojicode.com/q3bsp/


나는 이것이 모든 브라우저에서 지원되지는 않지만 필자가 요구 한 유스 케이스이기 때문에 이것을 새로운 허용 답변으로 사용하고 있습니다.
Dennkster

188

자바 스크립트로 마우스 포인터를 이동할 수 없습니다.

가능하다면 잠시 동안의 의미에 대해 생각하십시오.)

  1. 사용자 생각 : "이 링크를 클릭하고 싶습니다"
  2. Javascript가 마우스 커서를 다른 링크로 이동
  3. 사용자가 잘못된 링크를 클릭하고 실수로 c 드라이브를 포맷하고 사탕을 먹는 악성 코드를 다운로드합니다.

74
실제 클릭 재킹.
블렌더


24
나는 마우스 커서를 제어하기 위해 싸우는 것을 싫어한다.
블렌더

78
웹 페이지는 누군가 링크를 클릭하지 않아도 강제로 다운로드 할 수 있으므로 실제로 보안 문제는 아닙니다. 그러나 웹 페이지 창 밖으로 이동할 수없는 것은 아닙니다.
dionyziz

11
@ dionyziz : 샌드 박스로의 강제 다운로드와 사용자 상호 작용에 의해 시작된 사용자 공간 다운로드 사이에는 큰 차이가 있습니다. 보안 영향은 실제로 매우 큽니다.
Martin Jespersen

88
  1. 클라이언트 시스템에서 작은 웹 서버를 실행하십시오. 작은 100kb 일 수 있습니다. 파이썬 / 펄 스크립트 등
  2. 마우스를 움직일 수있는 사전 컴파일 된 작은 C 실행 파일을 포함하십시오 .
  3. 간단한 http 호출, AJAX 등을 통해 CGI 스크립트로 실행하십시오.

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

추신 : 어떤 문제 든, 왜, 어떻게 할 수 없는지, 어떻게해야하는지에 대한 수백 가지의 변명이 있습니다. 일어날 것입니다.


13
나는 우리가 ...의 xD "C 실행"될 때까지 보드의 모든했다 생각
dGRAMOP

1
웹 서버? 아마도 당신은 http 인터페이스를 가진 프로그램을 의미 할 것이다. 웹이 필요 없다. Go 프로그래밍 언어는 http 부분을 쉽게 추가 할 수 있다는 점에서 C보다 유리할 수 있습니다. 서버 응용 프로그램을 작성하십시오.
barlop

3
C = 0 종속성. 웹은 http입니다. 귀여운 홈페이지는 없어요
Alex Gray

PS의 경우 +1 노드 dev-server 또는 비슷한 npmjs.com/package/http-server를 사용하여 CGI 호출을 실행할 수 있습니까 ??
ATHER

1
Javascript질문 아래에 태그 가있는 사람이 있습니까?

80

실제 (시스템) 마우스 커서를 사용하지 않으면 마우스 커서를 화면의 지정된 영역에 배치 할 수 있다고 생각합니다.

예를 들어, 커서 대신 작동 할 이미지를 생성하고 장면에서 마우스 입력을 감지하면 시스템 커서의 스타일을 '없음'( sceneElement.style.cursor = 'none')으로 설정 한 다음 숨겨진 이미지 요소가 작동 하는 이벤트를 처리 할 수 있습니다. 사전 정의 된 축 / 경계 상자 변환을 기반으로 장면에서 원하는 위치에 커서로 표시됩니다.

이 방법으로 실제 커서를 어떻게 이동했는지에 관계없이 번역 방법은 이미지 커서를 필요한 곳 ​​어디에서나 유지할 수 있습니다.

편집 : 이미지 표현과 강제 마우스 움직임을 사용하는 jsFiddle의 예제


5
그래 넌 할수있어. 주어진 요소의 커서 스타일을 '없음'으로 설정하기 만하면됩니다. 시도 해봐.
Xaxis

14
이것이 가장 사려 깊은 답변입니다. 우리가 어떤 마우스 잠금을 얻을하지 못할 때 어떤 다른 답변이 꽤 제한이 소리를 정말 어떤 값을 추가 도트 :) 그러나 FPS 등과 같은 흥미로운 게임을 가져 WebGL이 방법 반면 실제로 ... 실제 솔루션을 제공합니다
Dennkster

3
그래도 마우스를 왼쪽으로 "계속 움직일"수 없다는 문제가 있습니다. 마우스가 웹 페이지를 떠나면 계속 제어 할 수 없습니다.
dionyziz

2
이것은이 문제에 대한 완벽한 솔루션입니다. 사람들이 불평하는 유일한 이유는 사소한 해결책이 아니기 때문입니다. 당신은 때때로 프로그래밍을해야합니다!
Marty

5
이 아이디어로 주위를 연주하고 JSFiddle의 예를 만든 jsfiddle.net/jaakkytt/9uczV
Jaak Kütt을

65

좋은 질문입니다. 이것은 실제로 Javascript 브라우저 API에서 누락 된 것입니다. 또한 팀과 WebGL 게임을하고 있는데이 기능이 필요합니다. Firefox의 bugzilla에 대한 문제를 열어서 마우스 잠금을 허용하는 API가있을 가능성에 대해 이야기 할 수 있습니다. 이것은 모든 HTML5 / WebGL 게임 개발자에게 유용 할 것입니다.

원하는 경우 의견을 남기고 의견을 남기고 문제를 찬성하십시오.

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

감사!



51
이런 일이 발생하면 브라우저를 사용하여 종료합니다. :-P 진심으로, 웹 사이트는 응용 프로그램을 설치할 때 제공하는 동의를 요구하지 않습니다. 사용자 경험을 향상시키기 위해이 수준의 제어를 사용하는 멋진 사람이라면이 기능은 훌륭한 기능이 될 것입니다. 불행히도 인터넷은 멍청한 곳이기 때문에 브라우저에서 결코 볼 수없는 정말 깔끔한 기능이 많이 있습니다. 즉, 전체 화면 API는 나머지 OS를 "잠글"수 있습니다.
누군가

4
@Someone Consent는 응용 프로그램에 의해 잠금이 가능해지기 전에 요청됩니다 (일반적인 웹 브라우저에서 전체 화면 동의를 요청하는 방식과 유사). 또한 사용자는 ESC 키를 눌러 항상 동의를 철회 할 수 있습니다.
dionyziz

7
일어난 일이야 그리고 그것은 여전히 ​​굉장합니다 (여전히 공급 업체 접두사가있는 경우) : mdn.github.io/pointer-lock-demo
ericsoco

1
@ericsoco 슬프게도 그 링크가 끊어졌습니다. 이것은 도움이 될 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden

46

마우스 포인터의 위치를 ​​감지 한 다음 웹 페이지 (본체의 상대 위치)를 클릭하여 클릭하려는 항목 위로 이동할 수 있습니다.

예를 들어 브라우저 콘솔의 현재 페이지에이 코드를 붙여 넣은 다음 나중에 새로 고칠 수 있습니다.

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

2
코드 예제를 게시 할 수 있다면 게시물이 더 가치가있을 것입니다. 또한, 나는 자주 묻는 질문에 모습을 가지고 당신을 제안 : stackoverflow.com/faq
ForceMagic

사용자가 클릭하면 올바른 요소를 실제로 어떻게 클릭합니까?
mmm

@momomo 사용할 수 있습니다document.getElementByID('thingtoclick').click();
계단식 스타일

1
완전히 별 이었어요! 상자 밖에서 생각하는 방법! 나는 그것이 질문자가 원하는 것을 실제로 제공한다고 의심하지만, 누가 진정으로 관심이 있습니까?
gcdev

12

마우스를 움직일 수는 없지만 잠글 수는 있습니다. 참고 : 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


4

자바 스크립트를 사용하여 마우스 포인터를 움직일 수 없으므로 보안상의 이유가 분명합니다. 이 효과를 얻는 가장 좋은 방법은 실제로 컨트롤을 마우스 포인터 아래에 배치하는 것입니다.


1
보안 영향은 분명하지 않습니다. 실제로 최근에 표준을 추가하면 심각한 보안 문제없이이 기능이 도입됩니다.
dionyziz

그러나 드래그 앤 드롭 API에서 어떻게 가능합니까?
oldboy

0

마우스 포인터의 실제 위치를 얻은 다음이 보상을 기반으로 스프라이트 / 장면 마우스 동작을 계산하고 보정하여 간단하게 수행 할 수 없습니까?

예를 들어, 마우스 포인터가 하단 중앙에 있어야하지만 왼쪽 상단에 있습니다. 커서를 숨기려면 이동 된 커서 이미지를 사용하십시오. 재배치 된 커서 스프라이트 (또는 '제어') 클릭과 일치하도록 커서 이동을 이동하고 마우스 입력을 매핑합니다. 경계에 도달하면 다시 계산합니다. 커서가 실제로 원하는 지점에 도달하면 보정을 제거하십시오.

면책 조항, 게임 개발자가 아닙니다.


본질적으로 Xaxis 답변과 동일합니다.
mathheadinclouds

@mathheadinclouds는 실제로 있지만 마우스 잠금의 브라우저 구현과는 무관합니다. 본질적으로; 하지만. 귀하의 의견에 감사드립니다. -편집 : 상관 없습니다. 당신이 무슨 말을하는지 봅니다. 그렇다면 내 유일한 생각은 여기에 유용하지 않다고 생각합니다. Xaxis 답변보다 더 많은 평신도가 있습니다.
Eric Shoberg

0

흥미 롭군 이는 이전에 언급 된 이유로 (스팸 클릭 및 악성 코드 삽입) 직접적으로 가능하지는 않지만 다음과 같은 인상을주는이 해킹을 고려하십시오.

1 단계 : 커서 숨기기

div가 있다고 가정하면이 CSS 속성을 사용하여 실제 커서를 숨길 수 있습니다.

.your_div {
    cursor: none
}

2 단계 : 의사 커서 소개

커서 모양의 이미지를 만들어 웹 페이지 내에 위치 = '절대'로 배치하십시오.

3 단계 : 실제 마우스 움직임 추적

이것은 쉬워요. 실제 마우스 위치 (X & Y 좌표)를 얻는 방법에 대해서는 인터넷을 확인하십시오.

4 단계 : 의사 커서 이동

실제 커서가 움직일 때 의사 커서를 동일한 X & Y 차이로 움직입니다. 마찬가지로 자바 스크립트 매직을 사용하여 웹 페이지의 어느 위치에서나 클릭 이벤트를 생성 할 수 있습니다 (사용 방법에서 인터넷 검색).

이제이 시점에서 의사 커서를 원하는 방식으로 제어 할 수 있으며 사용자는 실제 커서가 움직이는 느낌을받습니다.

====

공정한 경고 : 하지 마십시오. 특정 사용 사례가 없거나 사용자를 도망치려는 경우를 제외하고는 커서 나 컴퓨터가 이런 식으로 제어되기를 원하지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.