카테고리 없음

21.01.15 프로젝트#1 클릭한 좌표 구하기

슈팅스타제제 2021. 1. 16. 04:29

축구 과제할 때 쓰려고 알아놓은 것인데 결국 못쓰고 프로젝트 때 쓰게 될 줄이야..

 

input 태그나 button태그에 onclick = "function()" 속성을 추가하여

클릭하면 함수를 호출하는 방법이 있다. 

 

갑자기 마우스로 클릭한 좌표 값이 궁금할 때가 있다(?)

 

이때는 속성을 추가할 때 onclick = "function(event)" 로 event를 넣어준다. 

함수를 호출할 때 전달되는 인자 값이 클릭하는 이벤트 자체가 되는 것이다. 

그리고 함수 선언식에서 다음 사항을 넣어준다. 

 

function(event){

    var x = event.clientX;

    var y = event.clientY;

}

 

그렇게 되면 변수 x, y이 client(클릭한 사람)가 클릭한 좌표의 x, y 값으로 선언된다. 

이제 이 x, y 좌표들을 아주 잘 활용하면 끝~!