JavaScript_javascript 스킬의 마우스 위치 관련 속성 획득 요약

Javascript에는 마우스 개체가 없습니다. 마우스 좌표를 얻는 것은 강력한 이벤트 개체에 따라 다릅니다.

문서의 마우스 움직임을 모니터링하여 마우스 위치를 실시간으로 얻을 수 있습니다.

하지만! ! 이벤트에 마우스 관련 속성이 너무 많아서 매우 혼란스럽습니다! 다음과 같습니다:

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

총 6개 그룹!

그리고 둘 사이의 차이점이 명확하지 않고, 브라우저가 호환되지도 않습니다!

이 글의 목적은 차이점을 명확히 하고 권장되지 않는 것을 선택하는 것입니다.

테스트 코드

다음 코드를 직접 실행하세요.

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

http://www.w3.org/1999/xhtml">
/>




신체 {위치:상대적;}
div {최소 높이: 300px; 배경색: #eee;}
#jg {오른쪽: 0; 위쪽: 10px; 위치: 배경색: #f00;}
스타일>

결과 표시

화면 내 div

크고 넓습니다. . .

오프스크린 DIV