screenX / Y, clientX / Y 및 pageX / Y의 차이점은 무엇입니까?
답변:
자바 스크립트에서 :
pageX, pageY, screenX, screenY, clientX, 및 clientY복귀 물리적 "CSS 픽셀"의 수를 나타내는 숫자는 점은 원점으로부터이다. 이벤트 지점은 사용자가 클릭 한 지점이며, 기준 지점은 왼쪽 상단의 지점입니다. 이러한 속성은 해당 기준점에서 수평 및 수직 거리를 반환합니다.
pageX및 pageY:
브라우저에서 완전히 렌더링 된 컨텐트 영역의 왼쪽 상단을 기준으로합니다. 이 기준점은 왼쪽 상단의 URL 표시 줄 및 뒤로 버튼 아래에 있습니다. 이 지점은 브라우저 창의 어느 곳에 나있을 수 있으며 페이지 내에 임베드 된 스크롤 가능 페이지가 있고 사용자가 스크롤 막대를 이동하면 실제로 위치를 변경할 수 있습니다.
screenX및 screenY:
실제 화면 / 모니터의 왼쪽 상단에 상대적으로이 기준점은 모니터 수 또는 모니터 해상도를 늘리거나 줄인 경우에만 이동합니다.
clientX및 clientY: 브라우저 창의
컨텐츠 영역 ( 뷰포트 )의 왼쪽 위 모서리를 기준으로합니다. 사용자가 브라우저 내에서 스크롤 막대를 움직여도이 지점은 이동하지 않습니다.
어떤 브라우저가 어떤 속성을 지원하는지 시각적으로 보려면 :
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools는 온라인 Javascript 인터프리터 및 편집기를 갖추고 있으므로 각각의 기능을 볼 수 있습니다
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph,
and an alert box will alert the x and y coordinates
of the mouse pointer.</p>
</body>
</html>여기의 차이를 설명하는 그림이다 pageY하고 clientY.
대한 동일 pageX하고 clientX각각.
pageX/Y 좌표는 렌더링 된 전체 페이지의 왼쪽 상단을 기준으로합니다 (스크롤로 숨겨진 부분 포함).
반면 clientX/Y좌표가 페이지의 보이는 부분의 왼쪽 상단 모서리를 기준으로하며, 브라우저 창을 통해 "볼".
데모보기
당신은 아마 필요 없을 것입니다 screenX/Y
screenX/Y?
pageX/pageY대신에 사용해야합니다 clientX/clientY.
- pageX / Y 는
<html>CSS 픽셀 의 요소를 기준으로 좌표를 제공합니다 . - clientX / Y 는
viewportCSS 픽셀을 기준으로 좌표를 제공합니다 . - 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이 스 니펫을 사용하면 스크롤 할 때 클릭 위치를 추적하고 브라우저 창을 이동할 수 있습니다.
맨 위로 스크롤하면 pageX / Y와 clientX / Y가 동일합니다.
이들의 차이점은 현재 참조하고있는 브라우저에 따라 다릅니다. 각각은 이러한 속성을 다르게 구현하거나 전혀 구현하지 않습니다. Quirksmode 에는 DOM 및 JavaScript Events와 같은 W3C 표준과 관련하여 브라우저 차이점에 관한 훌륭한 문서가 있습니다.