마우스 이벤트의 screenY, pageY, clientY, layerY, offsetY 속성에 대한 자세한 설명_javascript 기술

스크린Y

모니터 화면의 왼쪽 상단을 기준으로 한 마우스 오프셋

페이지Y

페이지 왼쪽 상단을 기준으로 한 마우스 오프셋(해당 값은 스크롤 막대의 영향을 받지 않음)

이 속성은 IE9에서는 지원되지 않습니다

그러나 이를 계산하는 코드를 작성할 수 있습니다. jQuery로 구현:

코드 복사 코드는 다음과 같습니다.

//누락된 경우 페이지X/Y를 계산하고 클라이언트X/Y를 사용할 수 있음
if ( event.pageX == null && 원본.clientX != null ) {
EventDoc = event.target.ownerDocument || 문서;
doc = eventDoc.documentElement;
본문 = eventDoc.body;
Event.pageX = original.clientX ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
Event.pageY = 원본.clientY ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
} 

간단하게 만들어 보세요.

브라우저 뷰포트를 기준으로 한 마우스 오프셋에 문서 스크롤 막대의 숨겨진 높이를 더한 값에서 문서의 clientTop을 뺀 값입니다.

코드 복사 코드는 다음과 같습니다.

var pageY = event.clientY document.documentElement.scrollTop-document.documentElement.clientTop

documentElement.clientTop을 빼는 이유

IE8 이하 브라우저 고유의 문서 오프셋입니다. html과 body의 padding과 margin을 0으로 설정해도 그 값은 영향을 받지 않습니다.

iE7에서 테스트한 결과                              

코드 복사 코드는 다음과 같습니다.

document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> document.bocy.clientTop --> 0px document.body.clientLeft --> 0px

클라이언트Y

브라우저 뷰포트의 왼쪽 상단을 기준으로 한 마우스 오프셋

clienty와 pagey의 차이점에 주의하세요. 페이지에 롤링 막대가 없을 때 Clienty의 값은 Pagey

와 동일합니다.

------------분할------------ -- -------------------

레이어Y

요소의 위치 스타일이 기본 정적이 아닌 경우 해당 요소에 위치 지정 속성이 있다고 말합니다.

현재 마우스 이벤트를 발생시킨 요소와 그 조상 요소 중 positioning 속성이 있는 가장 가까운 요소를 찾아 그에 대한 마우스의 오프셋 값을 계산하고 요소 테두리의 왼쪽 상단 모서리의 외교점을 구합니다. 상대점. 위치 지정 속성이 있는 요소를 찾을 수 없는 경우 오프셋은 현재 페이지를 기준으로 계산되며 이는 pageY와 동일합니다.

이 속성은 IE9에서는 지원되지 않지만 고유한 offsetY로 대체될 수 있습니다.

오프셋Y

IE 관련 속성

offsetY와 layerY의 차이점은 전자의 오프셋 값을 계산할 때 요소 테두리의 왼쪽 상단 내부 교차점을 기준으로 한다는 점입니다. 따라서 마우스가 요소 테두리에 있을 때 오프셋 값은 음수 값입니다. 또한 offsetY는 이벤트를 트리거하는 요소에 위치 지정 속성이 있는지 여부를 상관하지 않으며 항상 이벤트를 트리거한 요소를 기준으로 오프셋 값을 계산합니다.

layerY와 offsetY의 차이점을 고려하여 호환 사용에 주의해야 합니다

1. 이벤트를 발생시키는 요소는 위치 속성을 설정해야 합니다.

​ 2. 요소에 border-top이 있는 경우, layerY는 offsetY 값보다 border-top 너비 값이 하나 더 많습니다.

코드 복사 코드는 다음과 같습니다.

//여기서 element.borderTopWidth는 요소의 실제 계산된 상단 테두리 너비여야 합니다.
var borderTopWidth = window.getCompulatedStyle ? window.getComputeStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; var offsetY = event.offsetY||(event.layerY borderTopWidth);

layerY 및 offsetY 속성을 통해 마우스 이벤트에 바인딩된 요소를 기준으로 마우스의 오프셋을 쉽게 계산할 수 있으며 이는 특정 상황에서 매우 유용합니다. 

여기에서는 마우스의 수직 방향 오프셋 속성에 대해 자세히 설명합니다. 수평 방향의 오프셋 속성도 유사하므로 다시 설명하지 않습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.