자바스크립트 마우스 클릭한 좌표 알아내기

자바스크립트 마우스 클릭한 좌표 알아내기

좌표가 세종류가 있습니다.

clientX, clientY 는 현재 문서 기준 위치

offsetX, offsetY 는 현재 오브젝트 기준 위치

screenX, screenY 는 현재 모니터 기준 위치

<script>

function action_coords(event) {

    var x1 = event.clientX;

    var y1 = event.clientY;

    var x2 = event.offsetX;

    var y2 = event.offsetY;

    var x3 = event.screenX;

    var y3 = event.screenY;

    var coords = "clientX: " + x1 + ", clientY: " + y1 + "<br/>";

    coords += "offsetX: " + x2 + ", offsetY: " + y2 + "<br/>";

    coords += "screenX: " + x3 + ", screenY: " + y3;

    document.getElementById("debug_out").innerHTML = coords;

}

</script>

<p>아래 빈공간 아무곳에서 클릭해보세요.</p>

<div id="debug_out" style="margin:100px;width:50%;height:200px;border:1px solid red;cursor:pointer;" onclick="action_coords(event)">debug out</div>

아래에서 테스트 해보세요~

아래 빈공간 아무곳에서 클릭해보세요.

debug out