js 이벤트 객체의 5가지 좌표 유형_javascript 기술

하지만 브라우저는 호환성은 말할 것도 없고, 다양한 좌표 속성이 너무 혼란스럽고 혼란스럽습니다. 자, 요약하자면:

테스트 브라우저: IE8, Chrome13, FF8, Safari5, Opera11 먼저 테스트 사례를 살펴보겠습니다(HTML5 doctype으로 테스트하면 향후 개발도 볼 수 있습니다). trend, 다른 doctype은 직접 테스트 가능):

코드 복사 코드는 다음과 같습니다. &lt ;style type="text/css"> 배경:빨간색 } 몸 { 배경:녹색; #null { 높이:1000px; #btn { 커서:기본값; 폭:50px; ; 줄 높이:30px;

;div id='null' >빈 영역 클릭 window.onload = function(){ var btn = document .getElementById('btn'); btn.onclick = function(e){ e = e|| window.event var box = (e.target || e.srcElement).getBoundingClientRect (), offsetX = e.clientX - box.left, offsetY = e.clientY - box.top p('x: ' e.x ', y: ' e.y); p('pageX: ' e.pageX ', pageY: ' e.pageY); p('offsetX: ' e.offsetX ', offsetY: ' p('FF는 offsetX를 구현합니다. : ' offsetX ', offsetY: ' offsetY) p('layerX: ' e.layerX ', layerY: ' e.layerY) p('clientX: ' e.clientX ', clientY: ' e.clientY); p('body.scrollLeft: ' document.body.scrollLeft ', body.scrollTop: ' document.body.scrollTop) p('body.clientLeft: ' document.body. clientLeft ', body.clientTop: ' document.body.clientTop) p('documentElement.scrollLeft: ' document.documentElement.scrollLeft ', documentElement.scrollTop: ' document.documentElement.scrollTop) p( 'documentElement.clientLeft: ' document.documentElement.clientLeft ', documentElement.clientTop: ' document.documentElement.clientTop) } } function p(s){ console.log(s ); }

Q: 브라우저의 왼쪽 상단을 기준으로 마우스 위치를 얻는 방법 보이는 문서 영역? 답변: x, y 및 clientX, clientY를 사용할 수 있지만 x, y는 IE에서 문서의 시작 부분을 기준으로 한 마우스 위치를 나타냅니다(즉, 스크롤 막대가 있으면 계산됩니다). ), 그리고 FF는 x, y를 지원하지 않습니다 권장 사항: clientX, clientY

질문: 문서 시작 부분을 기준으로 마우스 위치를 가져오는 방법은 무엇입니까? 답변: IE: x, y를 사용하세요(이벤트 소스의 상위 요소(documentElement까지)가 position:relative 등을 설정하지 않은 경우, 그렇지 않으면 문서가 아닌 가장 가까운 요소를 기준으로 합니다) Non-IE ：pageX, pageY 사용 LayerX, layerY도 실제로 가능하지만 IE와 Opera에서는 지원하지 않습니다! 그렇다면 IE가 정상적인 값을 얻도록 하려면 어떻게 해야 할까요? 답변: event.clientX document.documentElement.scrollLeft, event.clientY document.documentElement.scrollTop Q: 이벤트 소스(event.target| |event.srcElement)? 정답: offsetX, offsetY. 그런데 FF에서는 지원하지 않는데 어떻게 해야 하나요? 1. 먼저 브라우저에 표시되는 문서 영역의 왼쪽 상단을 기준으로 마우스 위치를 가져옵니다. 2. 그런 다음 브라우저에 표시되는 문서 영역의 왼쪽 상단을 기준으로 이벤트 소스의 위치를 가져옵니다. 🎜> 3. 빼서 하루라고 부르세요. 어떤 사람들은 2단계를 어떻게 해야 하느냐고 물을 수도 있습니다. 글쎄, 좋은 사람들은 끝까지 해낸다! HTMLElement.getBoundingClientRect() 메소드 반환 값은 다음과 같습니다: {top:xx, right:xx, Bottom:xx, left:xx, width:xx, height:xx} 즉, 요소 위치 정보가 제공되며 우리가 해야 할 일은 다음과 같습니다:

코드 복사

코드는 다음과 같습니다.

var box = (e.target || e.srcElement).getBoundingClientRect(), offsetX = e.clientX - box.left, offsetY = e.clientY - box.top; 테스트 결과 모든 브라우저는 event.offsetX, event.offsetY와 일치합니다(물론 FF는 제외).

제 예에서는 원래는 scrollLeft, scrollTop, clientLeft, clientTop도 감지되었습니다. 그 중 몇몇은 문제를 일으킬 것이라고 생각했으며 테스트 결과는 다음과 같습니다. scrollTop을 제외하고 다른 모든 것은 0입니다(물론 scrollLeft는 가로 스크롤 막대가 없기 때문입니다) ScrollTop은 각 브라우저에서 다르게 동작합니다. , body.scrollTop의 경우 IE, FF, Opera: 0 Chrome, Safari: 스크롤 업 거리 documentElement.scrollTop의 경우 IE, FF, Opera: 스크롤 최대 거리 크롬, 사파리: 0