안녕하세요.
디자이너를 위한 jQuery P.222 관련 질문 하나 드릴게요.
여기에 보면 툴팁의 움직임을 감지하기 위해서 mousemove()이벤트에 X방향으로는 e.pageX,
Y방향으로는 e.pageY 를 사용하고 있는데요.
책의 P.106 에 보면 "JavaScript 원포인트 레슨"에서는 현재의 X좌표와 Y좌표를 얻기 위해서
e.clientX와 e.clientY 를 사용하고 있는데요.
제가 문의드릴점은 e.pageX, e.pageY 와 e.clientX, e.clientY가 어떻게 다른것인지 알고 싶습니다.
두 좌표 체계의 차이점을 쉽게 알려면 직접 alert 등을 이용하여 출력해 보는 것이 좋습니다.
간단히 아래와 같은 스크립트를 추가하시면
$(document).click(function(e){
alert("cx= "+e.clientX+"|cy= "+e.clientY);
alert("px= "+e.pageX+"|py= "+e.pageY);
});
좌표값을 알수 있습니다.
client는 화면상에 같은 위치를 찍을 경우 항상 같은 값을 출력합니다.
즉 화면 스크롤 등에 의해서 내용에 바뀌었다 하더라고 같은 위치가 되는 겂니다.
이런 좌표는 떠다니는 레이어 배너 같은것의 위치를 잡는데 사용하면 유용할 것입니다.
(스크롤되어도 따라다니는 메뉴)
그에 비해서 page는 웹페이지 자체를 커다란 화면으로 보시면 됩니다.
스크롤 등에 의해서 내용이 바뀌면 그 위치도 달라집니다.
이런 좌표는 페이지 내에서 빠르게 이동하기 같은 부분에 사용하면 좋겠네요.