Open SoYoung210 opened 4 years ago
window.addEventListener('mousemove', onMouseMove)를 이용해서 drag 이벤트를 처리하는 상황이다.
window.addEventListener('mousemove', onMouseMove)
offsetX는 Event가 등록된 target으로부터 x축으로 얼만큼 떨어져 있는지에 대한 속성이다.
offsetX
브라우저 화면 기준으로 x축에서 얼만큼 떨어져 있는지에 대한 속성이다.
codepen에서 다양한 예시를 확인 해보자.
검은색 상자 안쪽을 클릭했을 때 offsetX값과 clientX값이 상이한 것을 확인할 수 있다.
clientX
window에 mousemove 이벤트를 등록할 경우 offsetX와 clientX는 어떻게 다를까?
mousemove
window.addEventListener('mousemove', onMouseMove)를 통해 이벤트를 등록하고, offsetX를 측정해본 결과이다. mouse가 위치한 element가 변경될때마다 상대적인 포지션이 새로 계산된다.
반면, clientX의 경우 화면을 기준으로 하기 때문에, 변하지 않는다.
따라서, 첫 사진과 같은 spec을 구현할 때는 window에 이벤트를 등록해야 하고(마우스가 해당 영역을 벗어나도 drag가능해야 하므로) clientX속성을 이용해야 한다.
Desc
window.addEventListener('mousemove', onMouseMove)를 이용해서 drag 이벤트를 처리하는 상황이다.e.offsetX
offsetX는 Event가 등록된 target으로부터 x축으로 얼만큼 떨어져 있는지에 대한 속성이다.e.clientX
브라우저 화면 기준으로 x축에서 얼만큼 떨어져 있는지에 대한 속성이다.
With Example
codepen에서 다양한 예시를 확인 해보자.
offetX, clientX
검은색 상자 안쪽을 클릭했을 때
offsetX값과clientX값이 상이한 것을 확인할 수 있다.window event
window에
mousemove이벤트를 등록할 경우 offsetX와 clientX는 어떻게 다를까?window.addEventListener('mousemove', onMouseMove)를 통해 이벤트를 등록하고,offsetX를 측정해본 결과이다. mouse가 위치한 element가 변경될때마다 상대적인 포지션이 새로 계산된다.반면,
clientX의 경우 화면을 기준으로 하기 때문에, 변하지 않는다.따라서, 첫 사진과 같은 spec을 구현할 때는 window에 이벤트를 등록해야 하고(마우스가 해당 영역을 벗어나도 drag가능해야 하므로) clientX속성을 이용해야 한다.