clientX, pageX, offsetX 및 screenX의 차이점

이러한 속성의 차이점을 구별하는 것은 어렵지 않지만, 오랫동안 사용하지 않으면 차이점을 잊어버리고 기억하지 못하는 경우가 많습니다. 어느 것이 어느 것입니까! 정말 미쳤어!

차이:

클라이언트X, 클라이언트Y:

브라우저 창의 표시 영역을 기준으로 한 X, Y 좌표(창 좌표) 표시 영역에는 도구 모음 및 스크롤 막대가 포함되지 않습니다. IE 이벤트와 표준 이벤트 모두 이 두 가지 속성을 정의합니다.

페이지X, 페이지Y:

clientX 및 clientY와 유사하지만 창 좌표 대신 문서 좌표를 사용합니다. 이 2가지 속성은 표준 속성은 아니지만 널리 지원됩니다. IE 이벤트에는 이 두 가지 속성이 없습니다.

offsetX, offsetY:

이벤트 소스 요소(srcElement)의 X, Y 좌표를 기준으로 IE 이벤트에만 이 두 속성이 있고 표준 이벤트에는 해당 속성이 없습니다.

screenX, screenY:

X,Y 좌표는 사용자 모니터 화면의 왼쪽 상단을 기준으로 합니다. 표준 이벤트와 IE 이벤트 모두 이 두 가지 속성을 정의합니다.

사실 이들의 차이점은 기억하기 쉽습니다! 사실 그것은 영어 단어의 의미이지만 대다수의 중국인에게는 매우 혼란스러울 것입니다.

클라이언트는 클라이언트이고 클라이언트는 브라우저이며 브라우저를 기준으로 한 좌표입니다.

페이지는 웹페이지를 기준으로 한 좌표, 즉 브라우저의 표시 영역과 스크롤 막대를 기준으로 한 좌표인 문서입니다.

offset은 오프셋으로, 소스 요소를 기준으로 한 오프셋 위치입니다.

스크린은 스크린, 즉 스크린을 기준으로 한 좌표입니다.

이렇게 하면 기억하기 쉬울 거예요~