웹 개발에서 screenX/Y, clientX/Y, pageX/Y의 차이점은 무엇입니까?

ScreenX/Y, ClientX/Y, PageX/Y 이해

웹 개발 영역에서 screenX/ Y, clientX/Y 및 pageX/Y는 페이지의 정확한 탐색 및 위치 지정 요소에 매우 중요합니다.

좌표 정의

• pageX /Y: 스크롤로 인해 숨겨진 영역을 포함하여 렌더링된 전체 페이지를 기준으로 좌표를 지정합니다.
• clientX/Y: 브라우저 창 내에서 페이지의 표시되는 부분을 기준으로 좌표를 지정합니다.
• screenX/Y: 실제 화면을 기준으로 한 좌표입니다.

사용 예

웹을 고려하세요. 콘텐츠가 뷰포트 너머로 확장되는 페이지입니다. 사용자가 아래로 스크롤하면 pageY 및 pageX 값은 여전히 ​​전체 페이지를 기준으로 하는 마우스 커서의 위치를 ​​나타냅니다. 그러나 clientX 및 clientY 값은 가시 영역 내의 위치를 ​​반영하도록 업데이트됩니다.

iPad Safari 고려 사항

iPad Safari의 경우 뷰포트는 실제 뷰포트보다 작습니다. 화면. 따라서 클라이언트X/Y 및 페이지X/Y 좌표는 screenX/Y 좌표와 다릅니다.

데모 및 코드 조각

이러한 차이점을 설명하려면 다음을 방문하세요. 제공된 데모를 보거나 다음 JavaScript 스니펫을 실행하세요.

document.addEventListener('DOMContentLoaded', () => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});

이 스니펫은 마우스를 움직여 페이지를 스크롤할 때 좌표가 동적으로 업데이트되는 것을 보여줍니다.

위 내용은 웹 개발에서 screenX/Y, clientX/Y, pageX/Y의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!