이벤트 객체를 사용해서 마우스가 클릭된 위치 캡처하기

문제

웹 페이지에서 마우스가 클릭된 위치를 알고 싶다.

해결

onclick 이벤트 핸들러를 document 객체에 할당하고 이벤트 함수가 처리될 때 Event 객체에 접근하여 클릭된 위치에 접근하면 된다.

document.onclick = processClick;

function processClick(evt){

  //event 객체에 접근
  evt = evt || window.event;
  var x = 0,
      y = 0;


  //event 객체가 pageX 속성을 포함하고 있다면
  //pageX와 pageY를 사용해서 위치를 구함
  if(evt.pageX){
    x = evt.pageX;
    y = evt.pageY;

  //event 객체가 clientX 속성을 포함하고 있다면
  }else if(evt.clientX){
    var offsetX = 0,
        offsetY = 0;

    //documentElement.scrollLeft를 지원하면
    if(document.documentElement.scrollLeft){
      offsetX = document.documentElement.scrollLeft;
      offsetY = document.documentElement.scrollTop;
    }else if(document.body){
      offsetX = document.body.scrollLeft;
      offsetY = document.body.scrollTop;
    }

    x = evt.clientX + offsetX;
    y = evt.clientY + offsetY;
  }

  document.write("you clicked at x=" + x + " y=" + y);
}

설명

이벤트 객체는 어떤 요소가 이벤트를 받았는지, 이벤트를 받은 위치는 어디인지, keypress 이벤트에서 어떤 키가 눌렸는지 등 이벤트에 대한 여러 정보를 포함한다.

IE8 이전 버전에서 Event 객체는 window 객체를 통해서 접근할 수 있다. 파이어폭스, 오페라, 크롬, 사파리 등 다른 브라우저에서는 Event 객체가 이벤트 처리 함수에 인수로 전달된다.

//event 객체에 접근
evt = evt || window.event;

//또는
evt = evt ? evt : window.event;

파이어폭스, 오페라, 크롬, 사파리는 비표준 이벤트 속성인 pageX와 pageY를 통해서 웹 페이지에서의 마우스 위치를 알 수 있다. 그러나 IE8은 이러한 속성을 지원하지 않는다. 대신 clientX와 clientY를 지원하며 창이 스크롤된 상태에서는 좌표차(offset)를 고려해서 값을 조정해야 한다.

IE6과 그 이상의 버전에서는 document.documentElement.scrollLeft와 document.documentElement.scrollTop을 사용할 수 있다. 더 오래된 버전에서는 document.body.scrollLeft와 document.body.scrollTop을 사용할 수 있다.

if(document.documentElement.scrollLeft){
    offsetX = document.documentElement.scrollLeft;
    offsetY = document.documentElement.scrollTop;
}else if(document.body){
    offsetX = document.body.scrollLeft;
    offsetY = document.body.scrollTop;
}

이제 수평과 수직 좌표차를 구했으므로 이를 clientX와 clientY 값에 각각 더한다. 그러면 이 값은 pageX와 pageY의 값과 같아진다.

x = evt.clientX + offsetX;
y = evt.clientY + offsetY;

예제보기