[javascript] screenX / Y, clientX / Y 및 pageX / Y의 차이점은 무엇입니까?

screenX/ Y, clientX/ YpageX/ 의 차이점은 무엇입니까 Y?

또한 iPad Safari의 경우 계산이 데스크탑에서와 비슷합니까? 아니면 뷰포트로 인해 약간의 차이가 있습니까?

예를 들어 주시면 좋을 것입니다.



답변

자바 스크립트에서 :

pageX, pageY, screenX, screenY, clientX, 및 clientY복귀 물리적 “CSS 픽셀”의 수를 나타내는 숫자는 점은 원점으로부터이다. 이벤트 지점은 사용자가 클릭 한 지점이며, 기준 지점은 왼쪽 상단의 지점입니다. 이러한 속성은 해당 기준점에서 수평 및 수직 거리를 반환합니다.

pageXpageY:
브라우저에서 완전히 렌더링 된 컨텐트 영역의 왼쪽 상단을 기준으로합니다. 이 기준점은 왼쪽 상단의 URL 표시 줄 및 뒤로 버튼 아래에 있습니다. 이 지점은 브라우저 창의 어느 곳에 나있을 수 있으며 페이지 내에 임베드 된 스크롤 가능 페이지가 있고 사용자가 스크롤 막대를 이동하면 실제로 위치를 변경할 수 있습니다.

screenXscreenY:
실제 화면 / 모니터의 왼쪽 상단에 상대적으로이 기준점은 모니터 수 또는 모니터 해상도를 늘리거나 줄인 경우에만 이동합니다.

clientXclientY: 브라우저 창의
컨텐츠 영역 ( 뷰포트 )의 왼쪽 위 모서리를 기준으로합니다. 사용자가 브라우저 내에서 스크롤 막대를 움직여도이 지점은 이동하지 않습니다.

어떤 브라우저가 어떤 속성을 지원하는지 시각적으로 보려면 :

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.

pageY 대 클라이언트 Y

대한 동일 pageX하고 clientX각각.


pageX/Y 좌표는 렌더링 된 전체 페이지의 왼쪽 상단을 기준으로합니다 (스크롤로 숨겨진 부분 포함).

반면 clientX/Y좌표가 페이지의 보이는 부분의 왼쪽 상단 모서리를 기준으로하며, 브라우저 창을 통해 “볼”.

데모보기

당신은 아마 필요 없을 것입니다 screenX/Y


답변

  1. pageX / Y<html>CSS 픽셀 의 요소를 기준으로 좌표를 제공합니다 .
  2. clientX / YviewportCSS 픽셀을 기준으로 좌표를 제공합니다 .
  3. screenX / Yscreen장치 내 픽셀을 기준으로 좌표를 제공합니다 .

데스크톱 및 모바일 브라우저에서 계산이 유사한 경우 마지막 질문에 대해 … 모바일 브라우저에서 더 나은 이해를 위해서는 레이아웃 뷰포트시각적 뷰포트 라는 두 가지 새로운 개념을 차별화해야합니다 . 시각적 뷰포트는 현재 화면에 표시되는 페이지의 일부입니다. 배치 뷰포트는 데스크탑 브라우저에서 렌더링되는 전체 페이지 (현재 뷰포트에 표시되지 않는 모든 요소 포함)와 동의어입니다.

모바일 브라우저의 pageXpageY문서 페이지를 기준으로 마우스 좌표를 얻을 수 있도록 여전히 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 표준과 관련하여 브라우저 차이점에 관한 훌륭한 문서가 있습니다.


답변