[Javascript] 위치

[초코러브]

마우스 이벤트 포인트

- event.clientX, event.clientY:

마우스 포인터의 위치. 기준 좌표는 브라우저 윈도우의 클라이언트 영역(browser).

- event.screenX, event.screenY:

마우스 포인터의 위치. 기준 좌표는 화면(screen).

- event.pageX, event.pageY:

마우스 포인터의 위치. 기준 좌표는 현재 문서(document). 문서가 기준이므로 스크롤하면 위치가 변경되며 이 점이 client, clientY와 다름.

- event.offsetX, event.offsetY:

마우스 포인터의 위치. 기준 좌표는 이벤트 타겟의 left-top.

(0, 0)는 padding이 포함된 타겟 엘리먼트의 left-top으로 margin, border 영역은 포함되지 않음.

(margin) (border) (0, 0) (padding)

element.addEventListener("mousedown",mouseDownEventListener);

function mouseDownEventListener(event) {

event = event || window.event;

// e.srcElement: for IE, e.target: for Firefox.

var target = (window.event !== 'undefined' ) ? event.srcElement : event.target;

var cX = event.clientX;

var sX = event.screenX;

var cY = event.clientY;

var sY = event.screenY;

var oX = event.offsetX;

var oY = event.offsetY;

var coords1 = "clientX: " + cX + ", Y: " + cY;

var coords2 = "screenX: " + sX + ", Y: " + sY;

var coords3 = "offsetX: " + oX + ", Y: " + oY;

console.log(coords1 + "," + coords2 + "," + corrds3);

}

엘리먼트 위치

- element.style.top, element.style.left:

static이 아닌 부모 상에서 엘리먼트의 위치

(0,0) (top, left) (margin) (border) (padding) & (scrollbar 포함)

- element.offsetTop, element.offsetLeft:

static이 아닌 직계 부모(offsetParent) 상에서 엘리먼트의 위치

(0, 0) (margin) (offsetTop, offsetLeft) (border) (padding)

- element.offsetWidth, element.offseHeight:

패딩과 보더를 포함한 엘리먼트의 너비와 높이

- element.clientTop, element.clientLeft:

결과적으로 보더 탑, 보더 레프트 사이즈

-

style 위치와 offset 위치

element.style.top = element.offsetTop - element.style.margin

element.style.width = element.offsetWidth - element.style.paddingLeft & Right

                              - element.style.borderLeftWidth & borderRightWidth

그림 

style의 값이 px이 아닌 경우 px 계산을 위해 window.getComputedStyle() 이용.

var style = window.getComputedStyle(element);

element.style.top, element.style.left 등에 대해 CSS를 통해 지정하지 않았거나 px 값이 아닌 auto, % 등으로 설정한 경우 window.getComputedStyle() 함수를 이용하면 px값을 얻을 수 있음 

마우스 드래깅 중에 텍스트가 선택되어지는 경우 방지

마우스 다운("mousedown")과 무브("mousemove") 이벤트 핸들러 모두에서 event.preventDefault() 를 호출하면 해결됨. (버블링 대신 캡처링도 고려 - 이벤트 등록시 useCaputure 옵션으로 true 설정)