[JS & jQuery] 특정 위치의 Object 알아내기

안녕하세요. 오늘은 jquery의 세 가지 좌표 Page, Client, Screen 에 대해서 알아 보겠습니다. JavaScript & jQuery 를 이용하면 화면의 특정 위치(좌표)에 있는 객체를 알아낼 수 있습니다. 여기서는 이를 응용해서, 어떤 버튼 A 가 있다고 할 때 그 버튼 A 로부터 10px 아래에 있는 객체가 무엇인지 확인 해 보겠습니다. Chrome 27.0.1453.116 m , jQuery v 1.8.3 에서 정상적으로 작동 함을 확인 했습니다.

우선 좌표에 대해 알아보기 위해, 아래 코드를 콘솔창에 입력해 봅시다.

$(document).click(function(event){
    console.log("clientX : " + event.clientX + "\nclientY : " + event.clientY);
    console.log("pageX : " + event.pageX + "\npageY : " + event.pageY);
    console.log("screenX : " + event.screenX + "\nscreenY : " + event.screenY);
});

위 코드를 통해  mouse click event 를 문서에 bind 하면 문서를 클릭할 때 마다 client 좌표, pagy 좌표, screen 좌표가 콘솔창에 출력되는 것을 볼 수 있습니다. 세 좌표는 각각 무엇을 의미할까요?

위의 그림은 사용자가 브라우저를 모니터의 오른쪽에 위치시키고, 문서의 중간 정도로 스크롤을 내린 상태를 보여 줍니다. 여기서

• 검은색 큰 네모 = HTML 문서의 크기
• 주황색 큰 네모 = 모니터 전체의 크기
• 두 네모가 겹치는 부분 = 문서 중에서 사용자가 현재 보고 있는 화면

입니다.

client, page, screen 좌표는 시작점의 위치에 따라 달라지는데, 각각의 시작점(0,0)이 설정되는 위치는 위 그림의 붉은 점과 같습니다. 아래는 $btnA라는 버튼(jQeury 객체)에서 10px 아래에 있는 객체(버튼 B) 를 찾아서 btnB 로 지정한 뒤, btnB 를 콘솔창에 출력하는 코드입니다.

var x = $btnA.offset().left - $(window).scrollLeft();   // 버튼 A 의 ClientX 좌표
var y = $btnA.offset().top - $(window).scrollTop();   // 버튼 A 의 ClientY 좌표
var height = $btnA.height();   // 버튼 A 의 높이
var btnB = document.elementFromPoint(x, y + height +10)
console.log(btnB);

버튼 A를 jQuery 객체로 만들어서 $btnA.offset() 을 해보면 top 좌표(=pageY)와 left 좌표(=pageX)를 반환하는 것을 볼수 있습니다. 이 때, 좌표 (x,y) 와 offset (top, left) 는 그 순서가 거꾸로이니 헷갈리지 않도록 주의하세요. 한편 특정 위치에 있는 object 를 찾는 자바스크립트 메소드(jQuery 에는 이러한 메소드가 없는듯 합니다) 는 document.elementFromPoint(x, y) 인데요, 이때의 x, y 는 offset() 과 달리 ClientX, ClientY 를 말합니다.

둘이 이용하는 좌표가 다르니 page 좌표를 Client 좌표로 변환해 주어야 합니다. 변환이라고 해 봤자 단순한 뺄셈입니다.

→ 버튼 A 의 Client 좌표 = (버튼 A의 Offset 좌표) - (Page 시작점(0, 0) 과 Client 시작점(0, 0) 의 거리)

여기서 "Page 시작점(0, 0) 과 Client 시작점(0, 0) 의 거리" 를 구하기 위해 $(window).scrollTop() 와 $(window).scrollLeft() 메소드를 이용합니다. 두 메소드는 page 의 시작점으로부터 client 화면의 시작점이 얼마나 스크롤되었는지(떨어져 있는지) 를 반환 해 줍니다.

참고로 elementFromPoint(x, y) 메소드에서 반환된 버튼 btnB 는 jQuery 객체가 아닌 JS 객체입니다. btnB 를 jQuery 객체로 사용하려면 $() 로 다시 둘러싸야 합니다.

이상으로 jquery 좌표를 이용하여 특정 위치의 Object 를 알아 내는 방법을 소개 했습니다. 포스팅이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다.