pageX, clientX, offsetX, layerX 의 일 들

각 브 라 우 저의 JS 에는 당신 을 매우 곤 혹 스 럽 게 하 는 속성 이 많 습 니 다. 각 제조 업 체 가 표준 에 대한 해석 과 집행 이 다 르 기 때문에 매우 혼 란 스 럽 습 니 다. 또한 우리 전단 공 성 사자 들 은 매우 어이 가 없고 갈등 합 니 다 > <
John Resig 대신 은 동적 요 소 는 세 가지 중요 한 요소, 위치, 사이즈 와 가시 성 이 있다 고 말 했다. 그래서 오늘 은 몇 페이지 의 위치 속성 을 가지 고 수술 을 한다.
PageX 와 clientX
PageX 와 clientX, 이 두 가 지 는 헷 갈 리 기 쉽 습 니 다. PageX: 마우스 가 페이지 에 있 는 위 치 는 페이지 왼쪽 상단 부터 시작 합 니 다. 즉, 페이지 를 참고 로 슬라이더 가 이동 하지 않 고 clientX: 마우스 가 페이지 에 있 는 시각 영역 위 치 는 브 라 우 저 시각 영역 왼쪽 상단 부터 시작 합 니 다. 즉, 브 라 우 저 슬라이더 가 현재 미 끄 러 지 는 위 치 를 참고 로 합 니 다.슬라이더 의 이동 에 따라 변화 합 니 다. 정말 까다 롭 습 니 다. 직접 그림 을 올 리 세 요.
두 개의 DIV 접점 (검 은 점 위치) 이 브 라 우 저 Y 축 방향 을 축소 하면 슬라이더 가 나타 나 면 둘 의 차 이 를 분별 할 수 있다.
빨간색 참고 블록 이 슬라이더 에 의 해 절 제 된 부분 이 분명 합 니 다. PageY 는 변 하지 않 지만 clientY 는 변 했 습 니 다.
그런데 비극 적 으로 PageX 는 FF 만 있 고 IE 라 는 비극 은 없 잖 아 요 TT. 그래서 황소 들 은 PageY = clientY + scrollTop - client Top 방법 을 생각해 냈 습 니 다.(Y 축, X 축 동 리, 이하 동일) 페이지 의 위치 = 시각 영역 위치 + 페이지 스크롤 바 높이 - 자체 border 높이 를 자 르 는 것 이 좋 습 니까? 아니면 직접 위의 그림 이 좋 습 니까?
모듈 경계 에서 scrollTop 은 브 라 우 저 슬라이더 에 굴 러 간 길 이 를 대표 하 며, clientY 와 더 하면 100 과 같 습 니 다. 마지막 으로 client Top, 즉 border - top 의 폭 을 하나 더 빼 야 합 니 다.
Jquery 의 PageX 코드 는 다음 과 같 습 니 다. 아주 세련 되 었 습 니 다.

1
2
3
4
5
6

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX !=  null ) {
	var doc = document.documentElement, body = document.body;
	event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft  || body && body.clientLeft || 0);
	event.pageY = event.clientY + (doc && doc.scrollTop  ||  body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
}

2. screenX
screenX: 마우스 가 화면 에 있 는 위치 입 니 다. 화면 왼쪽 상단 부터 시작 합 니 다. 이 건 논란 이 없습니다 ^ ^
3. offsetX 와 layerX
다음은 offsetX 와 layerXoffsetX: IE 특유 의 마우스 입 니 다. 이 벤트 를 촉발 하 는 요소 의 위치 에 비해 원소 상자 모형 의 내용 영역의 왼쪽 상단 을 참고 로 boder 가 있 으 면 마이너스 가 발생 할 수 있 습 니 다.
IE 는 콘 텐 츠 영역 으로 시작 하여 border 에 위로 들 어가 면 마이너스 가 됩 니 다.
layerX: FF 특유 의 마우스 가 현재 좌표계 의 위치 에 비해 트리거 요소 가 절대적 인 포 지 셔 닝 이나 상대 적 인 포 지 셔 닝 을 설정 하지 않 으 면 페이지 를 참고 점 으로 하고 있 으 면 참고 좌표 계 를 바 꾸 고 트리거 요소 상자 모델 의 border 구역 의 왼쪽 상단 을 참고 점 으로 한다. 즉, 트리거 요소 가 상대 적 이거 나 절대적 인 포 지 셔 닝 을 설정 한 후에layerX 와 offsetX 는 행복 하 게 함께 살 고 있 습 니 다 ^ - ^, 거의 같 습 니 다. 유일한 차이 점 은 border 를 참고 로 하 는 것 입 니 다. 하 나 는 내용 을 참고 로 하 는 것 입 니 다.
FF border 부터,
x / y: IE 특유, 이것 은 원래 layerX / layerY 의 역할 과 기본적으로 같 지만 IE 의 현재 좌표 선택 은 매우 혼 란 스 러 워 서 사용 할 수 있 으 면 사용 하지 않 고 토론 하지 않 습 니 다.
인터넷 에서 다른 사람 이 정리 한 이 여섯 가지 갈등 표...

1
2
3
4
5
6

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+
x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+
layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+
pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+
clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

clientX 와 screenX 만 이 W3C 기준 을 크게 기뻐 합 니 다. 다른 것 은 모두 고민 하고 있 습 니 다. 가장 큰 힘 은 chrome 과 safari 한 마리 의 용 통 살 입 니 다!모든 속성 을 지원 합 니 다. 그 중 (offsetX 와 layerX 는 border 를 참고 점 으로 합 니 다)...