선회
모니터 화면의 왼쪽 상단에서 마우스 오프셋
페이지
페이지의 왼쪽 상단 모서리에서 마우스의 오프셋 (값은 스크롤 막대의 영향을받지 않습니다)
이 속성은 IE9에 따라 지원되지 않습니다
그러나 계산하기 위해 코드를 작성할 수 있습니다. jQuery의 구현 :
코드 사본은 다음과 같습니다.
// 누락 된 경우 pagex/y를 계산하고 clientx/y를 사용할 수 있습니다
if (event.pagex == null && original.clientx! = null) {
eventDoc = event.target.ownerDocument || 문서;
doc = eventDoc.documentElement;
Body = EventDoc.Body;
event.pagex = original.clientx + (doc && doc.scrollleft || body && body.scrollleft || 0) - (doc && doc.clientleft || | body.clientleft || 0);
event.pagey = original.clienty + (doc && doc.scrolltop || body && body.scrolltop || 0) - (doc && doc.clientTop || body.clientTop || 0);
}
간단히 구현하십시오.
브라우저 뷰포트에 대한 마우스의 오프셋과 문서의 스크롤 바의 숨겨진 높이는 문서의 클라이언트를 뺀 것입니다.
코드 사본은 다음과 같습니다.
var pagey = event.clienty +document.documentElement scrolltop-document.documentElement.clientTop
document.documentElement.clientTop을 빼는 이유
이것은 IE8에 따른 브라우저 별 문서의 오프셋입니다. HTML이 0으로 설정 되더라도 본체의 패딩과 마진은 그 값에 영향을 미치지 않습니다.
IE7에 따라 테스트
코드 사본은 다음과 같습니다.
Document.DocumentElement.clientTop-> 2PX Document.DocumentELement.Clientleft-> 2px
document.bocy.clientTop-> 0px document.body.clientleft-> 0px
고객
브라우저 뷰포트의 왼쪽 상단에서 마우스 오프셋
고객과 Pagey의 차이에주의하십시오. 페이지에 스크롤 막대가 없을 때 클라이언트의 값은 Pagey와 동일합니다.
----------------------------------분할-----------------------------------------------
레이어
요소의 위치 스타일이 기본 정적이 아닌 경우이 요소에 위치 속성이 있다고 말합니다.
현재 마우스 이벤트와 조상 요소를 트리거하는 요소에서 위치 속성으로 가장 가까운 요소를 찾으려면 마우스의 오프셋 값을 계산하여 요소의 왼쪽 상단 모서리에서 상대 지점으로 외교점을 찾으십시오. 위치 속성이있는 요소를 찾을 수없는 경우 현재 페이지에 비해 오프셋이 계산되며 현재 Pagey와 동일합니다.
이 속성은 IE9에 따라 지원되지 않지만 고유 한 오프셋으로 대체 할 수 있습니다.
오프셋
IE 특정 특성
오프셋과 계층의 차이점은 오프셋 값을 계산할 때 전자가 요소 경계의 왼쪽 상단 모서리의 내부 교차점과 관련이 있다는 것입니다. 따라서, 마우스가 요소의 경계에있을 때, 오프셋 값은 음수입니다. 또한 Offsety는 이벤트를 트리거하는 요소가 위치 지정 속성을 가지고 있는지 여부를 신경 쓰지 않습니다. 이벤트를 트리거하는 요소에 대한 오프셋 값을 항상 계산합니다.
레이어와 오프셋의 차이를 감안할 때 호환 가능한 두 가지 사용에주의를 기울여야합니다.
1. 이벤트를 트리거하는 요소는 위치 지정 속성을 설정해야합니다.
2. 요소에 경계층 탑이있는 경우 레이어는 오프셋의 값보다 경계선 폭 값이 하나 더 있습니다.
코드 사본은 다음과 같습니다.
// 요소 .BorderTopWidth는 실제로 계산 된 요소의 상단 경계 너비 여야합니다.
var bordertopwidth = window.getComputedStyle? Window.getComputedStyle (요소, NULL) .BORDERTOPWIDTH : Element.CurrentStyle.borderTopwidth;
var offsety = event.offsety || (event.layery + bordertopwidth);
레이어 및 오프셋 특성을 통해, 결합 된 마우스 이벤트 요소에 대한 마우스의 오프셋을 계산하는 것이 매우 편리하며, 이는 때때로 매우 유용합니다.
여기서 우리는 마우스의 수직 방향의 오프셋 속성에 대해 이야기합니다. 수평 방향의 오프셋은 비슷하므로 더 이상 논의하지 않을 것입니다.
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.