javascript 마우스 클릭시 x 및 y 좌표 가져 오기

클릭하면 (onClick 이벤트) div 태그가 생겨 printMousePos() 함수가 실행됩니다. 이는 HTML 태그입니다 :javascript 마우스 클릭시 x 및 y 좌표 가져 오기

<html> 
    <header> 
     <!-- By the way, this is not the actual html file, just a generic example. --> 
     <script src='game.js'></script> 
    </header> 
    <body> 
     <div id="example"> 
      <p id="test">x: , y:</p> 
     </div> 
    </body> 
</html>

이 별도의 .js 파일에 printMousePos 기능입니다 : (당신이 그것을 모두를 클릭하면 그것이 알고)

function printMousePos() { 
    var cursorX; 
    var cursorY; 
    document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
}

예, 함수가 실제로 작동, 하지만 그것은 x와 y 모두에 대해 정의되지 않은 값을 반환하므로 함수의 x와 y 코드가 올바르지 않다고 가정합니다. 어떤 아이디어? 또한 거기에 어떤 자바 자체 내에서 x와 y를 반환하는 자바 스크립트 자체 내에 내장 된 함수가 없다는 것을 알고 .. 거기에 JQuery 또는 PHP 말을 할 수있는 방법이 있을까요? (비록 가능하다면 자바 스크립트를 사용하는 것이 좋습니다.) 감사!

출처

2014-05-19 Bryce Hahn

'event.clientX'와'event.clientY' – Jonathan

나는 STIL 것을 시도 @ 조나단 하지만 난 정의되지 않은 반환합니다. –

커서 이동 및 커서 Y는 마우스 이동 이벤트가 트리거되기 전에 정의되지 않습니다. 클릭 이벤트 전달 이벤트에서 printMousePos 함수로의 위치를 원하면 – Mathias

이렇게하면됩니다.

MouseEvent - MDN

는 X 지역 (DOM 함량)에 마우스 포인터의 좌표만을
읽기 MouseEvent.clientX
function printMousePos(event) { 
 
    document.body.textContent = 
 
    "clientX: " + event.clientX + 
 
    " - clientY: " + event.clientY; 
 
} 
 

 
document.addEventListener("click", printMousePos);
좌표.

MouseEvent.clientY 읽기는
는 Y 지역 (DOM 함량)에 마우스 포인터의 좌표를 조정합니다.

출처

2014-05-19 18:30:45 Jonathan

Re : [pageX/Y vs. clientX/Y] (http://www.bennadel.com/blog/1869-jquery-mouse-events-pagex) -y-vs-clientx-y.htm) – Kylok

이것은 올바른 대답이며 그렇게 표시되어야합니다 –

그것은 당신의 printMousePos 기능 같은 소리해야 :

는 X를 얻고 Y는 HTML 현재

에 해당 값을 추가 마우스

의 좌표가이 작업을 수행 :

는 (정의되지 않은) 변수를 생성 마우스의 X 및 Y 좌표
"mousemove"이벤트에 함수를 첨부합니다. 마우스 이동으로 트리거 될 때 마우스 좌표로 변수를 설정합니다.
변수의 현재 값을 HTML에 추가합니다

문제를 참조하십시오? "mousemove"이벤트에 함수를 추가하자마자 변수를 설정하면 변수가 설정되지 않습니다.

아마도 mousemove 이벤트가 전혀 필요하지 않은 것처럼 보입니다. 나는 이런 식으로 뭔가를 시도 할 것입니다 :

function printMousePos(e) { 
    var cursorX = e.pageX; 
    var cursorY = e.pageY; 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
}

편집가 :

게임 : 당신이 printMousePos(e)

출처

2014-05-19 18:39:04 Kylok

간단한 솔루션으로 업데이트, printMousePos()에 어떤 인수를 전달되지 않은 통지를하지 않았다 것은 이것이다 의 .js는 :

document.addEventListener('click', printMousePos, true); 
function printMousePos(e){ 

     cursorX = e.pageX; 
     cursorY= e.pageY; 
     $("#test").text("pageX: " + cursorX +",pageY: " + cursorY); 
}

출처

2017-10-29 21:03:49 Tea

javascript 마우스 클릭시 x 및 y 좌표 가져 오기

답변

관련 문제