screenX/Y, clientX/Y 및 pageX/Y의 차이점은 무엇입니까?
screenX/Y,clientX/Y ★★★★★★★★★★★★★★★★★」pageX/Y
또한 iPad Safari의 경우 계산은 데스크톱과 비슷합니까?아니면 뷰포트 때문에 다른 점이 있나요?
예를 들어 주시면 감사하겠습니다.
여기 사진 한 장이 있습니다.pageY ★★★★★★★★★★★★★★★★★」clientY.
일일도 입니다.pageX ★★★★★★★★★★★★★★★★★」clientX각각 다음과 같다.
pageX/Y페이지 (스크롤링으로)에입니다.
동시에clientX/Y좌표는 브라우저 창을 통해 "표시"되는 페이지의 왼쪽 상단 모서리에 상대적입니다.
데모 참조
또는 다음 스니펫을 사용해 보십시오.
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);
});body {
border: 1px solid red;
min-height: 10000px;
margin: 10px;
}
#info {
border: 1px solid blue;
position: fixed;
top: 80px;
left: 40px;
}<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>주의: 아마 필요 없을 것입니다.screenX/Y
JavaScript의 경우:
pageX,pageY,screenX,screenY,clientX , , , , 입니다.clientY이벤트 포인트가 참조점에서 가져온 논리 "CSS 픽셀" 수를 나타내는 숫자를 반환합니다.이벤트 포인트는 사용자가 클릭한 위치이며 참조 포인트는 왼쪽 상단에 있는 점이 됩니다.이러한 속성은 해당 참조점에서 이벤트 점의 수평 및 수직 거리를 반환합니다.
pageX ★★★★★★★★★★★★★★★★★」pageY:
브라우저에서 완전히 렌더링된 컨텐츠 영역의 왼쪽 상단을 기준으로 합니다.이 참조점은 왼쪽 상단의 URL 표시줄 및 뒤로 버튼 아래에 있습니다.이 지점은 브라우저 창의 어디에나 있을 수 있으며, 페이지 내에 스크롤 가능한 페이지가 포함되어 있고 사용자가 스크롤 막대를 이동할 경우 실제로 위치를 변경할 수 있습니다.
screenX ★★★★★★★★★★★★★★★★★」screenY:
실제 화면/모니터의 왼쪽 상단을 기준으로 이 기준점은 모니터 수 또는 모니터 해상도를 늘리거나 줄이는 경우에만 이동합니다.
clientX ★★★★★★★★★★★★★★★★★」clientY:
브라우저 창의 컨텐츠 영역(뷰포트) 왼쪽 상단 모서리에 상대적인 값입니다.사용자가 브라우저 내에서 스크롤바를 이동해도 이 지점은 이동하지 않습니다.
어떤 브라우저가 어떤 속성을 지원하는지 시각적으로 확인하려면:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
<script>
function showCoordinates(event){
var x = event.clientX;
var y = event.clientY;
alert(`X coordinates: ${x}, Y coordinates: ${y}`);
}
</script>
<p onmousedown="showCoordinates(event)">
Click this paragraph, and an alert box will show the x
and y coordinates of the mouse relative to the viewport
</p>- pageX/Y는 에 상대적인 좌표를 제공합니다.
<html>(CSS) - clientX/Y는 다음 위치에 상대적인 좌표를 제공합니다.
viewportCSS の c c c c c 。 - screenX/Y는 다음을 기준으로 좌표를 제공합니다.
screen이치노
마지막 질문입니다만, 데스크톱 브라우저와 모바일 브라우저의 계산이 비슷한지 어떤지...모바일 브라우저에서는 레이아웃 뷰포트와 비주얼 뷰포트의 두 가지 새로운 개념을 차별화할 필요가 있습니다.비주얼 뷰포트는 현재 화면에 표시되는 페이지의 일부입니다.레이아웃 뷰포트는 데스크톱브라우저에 렌더링되는 전체 페이지(현재 뷰포트에 표시되지 않는 모든 요소 포함)의 동의어입니다.
모바일 브라우저에서는pageX그리고.pageY는 여전히 CSS 픽셀 단위의 페이지에 상대적이므로 문서 페이지에 상대적인 마우스 좌표를 얻을 수 있습니다.반면에clientX그리고.clientY시각적 뷰포트를 기준으로 마우스 좌표를 정의합니다.
비주얼 뷰포트와 레이아웃 뷰포트의 차이에 관한 다른 스택오버플로우 스레드가 여기에 있습니다: 비주얼 뷰포트와 레이아웃 뷰포트의 차이점?
또 다른 유용한 리소스: http://www.quirksmode.org/mobile/viewports2.html
저는 시각적으로 설명할 수 있는 사물을 좋아하고 이해하는 것을 좋아하지 않습니다.
이 페이지에 직접 이벤트를 추가하고 직접 클릭하는 것이 도움이 되었습니다!개발자 도구/Firebug 등에서 콘솔을 열고 다음과 같이 붙여넣습니다.
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);Click anywhere이 스니펫으로 스크롤, 브라우저 창 이동 등의 클릭 위치를 추적할 수 있습니다.
페이지 X/Y와 클라이언트 X/Y는 맨 위로 스크롤할 때 동일합니다.
그 차이는 현재 참조하고 있는 브라우저에 따라 크게 달라집니다.이러한 속성은 각각 다르게 구현되거나 전혀 구현되지 않습니다.Quirksmode에는 DOM이나 JavaScript Events와 같은 W3C 표준에 관한 브라우저의 차이에 관한 훌륭한 문서가 있습니다.
clientX/Y는 상대적인 화면 좌표를 가리킵니다.예를 들어 웹 페이지가 충분히 길면 클라이언트X/Y는 클릭된 포인트의 좌표 위치를 실제 픽셀 위치로 나타내며 ScreenX/Y는 페이지 시작과 관련하여 표준 위치를 나타냅니다.
언급URL : https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y
'programing' 카테고리의 다른 글
| CodeIgniter:컨트롤러, 액션, URL 정보를 얻는 방법 (0) | 2023.01.24 |
|---|---|
| X초마다 "hello world" 인쇄 (0) | 2023.01.24 |
| Mockito Matcher 및 원시 요소 배열 (0) | 2023.01.24 |
| 포인터 산술 (0) | 2023.01.24 |
| MariaDB 컴파일 오류 발생(GnuTLS를 찾을 수 없지만 설치됨) (0) | 2023.01.24 |