Screen 객체와 MouseEvent객체의 위치 프로퍼티와 메소드

Screen 객체의 위치 프로퍼티와 메소드

아래 표의 프로퍼티 중에 width, height 인 프로퍼티는 현재 자신의 모니터 해상도를 기준으로 하고, availWidth, availHeight는 운영체제의 작업표시줄 영역의 크기를 뺀 크기이다.

프로퍼티 / 메소드	내용
screen.width, screen.height	- 모니터(screen)해상도의 전체 넓이와 높이(작업표시줄 포함)
screen.availWidth, screen.availHeight	- 작업 표시줄이 포함되지 않은  모니터 해상도의 넓이와 높이

 

MouseEvent 객체의 위치 프로퍼티와 메소드

MS IE 에서는 아래의 표 중 클릭한 지역 위치가 담긴 offsetX, offsetY 프로퍼티를 제공하지만 비표준입니다.

( 단,  파이어폭스에서 offsetX, offsetY 미지원 )

프로퍼티 / 메소드	내용
clientX, clientY	- 브라우저 화면상에서 가장 위쪽 지점에서부터 마우스 포인터의 x, y위치 ( 스크롤이 발생하여 이동된 값은 무시한다. 즉, 웹 브라우저 좌측상단을 기준으로 한 절대 좌표라고 이해하면 된다.  고객중심이니까..ㅎ)
pageX, pageY	- clientX, clientY와 같은 좌표이지만 문서 중심으로 문서가 스크롤되는 경우 스크롤이 된 부분까지  마우스 포인터의 x, y의 위치값
offsetX, offsetY	- 이벤트가 발생한 요소(엘리먼트) 내부에서 마우스 포인터가 가리키는 x, y의 위치값 ( p 태그 내부에서 마우스 이벤트가 발생시 p태그 박스모델내에서의 마우스 포인터의 좌표값)
screenX, screenY	- 사용자 모니터 해상도의 좌측상단 지점을 기준으로 한 마우스 포인터의 x, y 위치값

클릭한 지역위치(클릭한 대상을 기준으로 하는 마우스의 커서 위치)를 구할 경우에는 다음과 같이 사용합니다.

// 클릭한 위치 값 알아내기

var offsetX = e.pageX - $(대상).offset().left;
var offsetY = e.pageY - $(대상).offset().top;

[파일 참고(딴동네)]

screen_properties_methods.html

mouse_location_properties_methods.html

Jaehee's e-room