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

var jg = document.getElementById('jg');
document.onmousemove = 함수 (e) {
e = e || window.event;
jg.innerHTML = 'layerX:' e.layerX
',layerY:' e.layerY
',
clientX:' e.clientX
',clientY:' e.clientY
',
pageX:' e.pageX
',pageY :' e.pageY
',
offsetX:' e.offsetX
',offsetY:' e.offsetY
',
screenX:' e.screenX
',screenY:' e.screenY
',
x:' e.x
',y:' e.y;
}