JavaScript에는 마우스 객체가 없으며 마우스 좌표를 얻는 강력한 이벤트 객체에 따라 다릅니다.
문서의 모방을 들으면 실시간으로 마우스 위치를 얻을 수 있습니다.
하지만! ! 이벤트에는 마우스와 관련된 속성이 너무 많아서 매우 흥미 롭습니다! 다음과 같이 :
| 이벤트 .layerx | 이벤트 .layery |
| event.clientx | 이벤트 .clienty |
| event.pagex | 이벤트 |
| event.offsetx | 이벤트. 오프 세트 |
| 이벤트 .Screenx | 이벤트 .Screeny |
| event.x | 이벤트 .y |
총 6 개의 그룹!
또한 차이점은 분명하지 않으며 브라우저는 호환되지 않습니다!
이 기사의 목적은 차이점을 명확히하고 권장하지 않는 것들을 선택하는 것입니다.
테스트 코드
다음 코드를 직접 실행하십시오.
코드 사본은 다음과 같습니다.
<! doctype html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<헤드> <br />
<meta charset = "utf-8" /> < /p>
<스타일>
신체 {위치 : 상대;}
Div {Min-Height : 300px; 배경색 : #eee;}
#jg {오른쪽 : 0; 상단 : 10px; 위치 : 고정; 배경색 : #F00;}
</스타일>
<p> < /head> <br />
<body> <br />
<span id = "jg"> 결과 표시 < /span> <br />
<입력 유형 = "버튼"value = "버튼" /> < /p>
<Div> 스크린 내 </div>
<div style = "높이 : 1000px; 너비 : 2000px; 배경 : #ddd;"> 매우 높고 넓습니다. . . </div>
<div> 오프 스크린 Div </div>
<p> < /body> <br />
<cript>
var jg = document.getElementById ( 'jg');
document.onmouseMove = function (e) {
e = e || Window.event;
jg.innerhtml = 'layerx :'+e.layerx+
', 레이어리 :'+e.layery+
', <br/> clientx :'+e.clientx+
', 클라이언트 :'+E.Clienty+
', <br/> pagex :'+e.pagex+
', pagey :'+e.pagey+
', <br/> offsetx :'+e.offsetx+
', offsety :'+e.offsety+
', <br/> screenx :'+e.screenx+
', screeny :'+e.screeny+
', <br/> x :'+e.x+
', y :'+ey;
}
< /script> <br />
</html>
테스트 중에, 나는 마법의 도구를 발견했습니다 : Chrome (Google Chrome)과 IE9는 위의 모든 속성과 호환됩니다! 그것들을 비교하는 것이 매우 편리합니다.
비교 후 결과는 다음과 같습니다.
각 속성의 정의
ClientX 및 Y는 브라우저 뷰포트에 대한 마우스의 좌표입니다 (즉, 스크롤 막대 외부의 부분은 무시됩니다). 모든 브라우저가 지원합니다.
Screenx 및 Y는 전체 화면의 왼쪽 (상단 가장자리)에 대한 마우스의 좌표이며, 기본적으로 문서와 접촉하지 않습니다. 완전히 호환됩니다.
Offsetx 및 Y는 현재 가리키는 물체에 비해 마우스의 좌표입니다. 현재 마우스가 버튼을 가리키면 Offsetx는이 버튼과 관련이 있습니다. Firefox는 지원하지 않습니다
동일한 표준 브라우저에서 X 및 Y, Layerx 및 Y는 IE의 Layerx를 대체하는 데 사용할 수있는 속성입니다.
Pagex와 Y는 뷰포트 외부를 포함하여 전체 페이지의 왼쪽 (상단 가장자리)에 대한 마우스의 좌표입니다. IE7과 8은 그것을 지원하지 않습니다.
핵심 사항 : Layerx 및 Layery
Layerx와 Y는 표준 브라우저에서 출시 된 새로운 속성이며 IE9도 지원합니다. 그는 Offsetx 및 Y 대신에 사용할 수 있습니다. 그러나 그의 정의는 다음과 같습니다. 현재 포인팅 요소에 대한 위치 정보를 갖는 요소의 좌표입니다. 이 "배치"는 비 디펜트 포지셔닝을 갖는 CSS 속성 (즉, 비 정적)을 나타냅니다.
현재 뾰족한 요소가 배치되면 Layerx와 Y는이 요소와 관련하여 좌표를 반환합니다. 그렇지 않으면이 요소의 부모 태그를 확인하십시오. 아직 위치가 없다면 계속하십시오. 루트 요소까지 -HTML 노드까지.
따라서 Firefox에서 값을 상쇄하려면 위치 위치 정보를 추가해야합니다!
호환성 요약 :
1. Firefox는 Offsetx, Offsety 및 X, y 속성을 지원하지 않지만 Layerx로 대체 할 수 있습니다.
2. x와 y의 IE는 Firefox & Chrome의 Layerx 및 Layery와 동일합니다.
3. IE7과 8의 문서의 경계는 브라우저 창의 경계에서 2px 떨어져 있으므로 Screenx는 창을 최대화 할 때 최소 2px입니다.
4. IE9의 Layerx와 Y는 값을 가지고 있지만, 설명 할 수 없을 정도로 부정확합니다. 그들은 HTML 태그와 관련이있는 것 같습니다. 예를 들어, 내 예제 코드에서 스크롤 막대를 가장 오른쪽으로 드래그하면 마우스는 빈에서 큰 div로 천천히 움직입니다. 현재 첫 번째 DIV의 가장 오른쪽과 가장 오른쪽의 차이도 Layerx에 포함됩니다. . . 마지막에 점점 더 많은 요소가 있기 때문에 계산이 더 복잡해집니다. Firefox와 Chrome의 레이어 렉스에는이 문제가 없습니다. 따라서 IE9에서 Layerx를 사용하지 마십시오.
5. 크롬에서는 x와 y가 값을 가지고 있지만 clientx 및 y와 정확히 동일합니다! 따라서 x, y 속성을 사용하는 것이 좋습니다.
호환성 치료
표준 브라우저에서는 위치 및 이벤트에서 Layerx를 사용하여 이벤트를 구현할 수 있습니다.
IE7에는 pagex 또는 pagey가 없습니다. Document.DocumentElement.scrollleft+eventx 만 사용하여 찾을 수 있습니다.
따라서, x, y 또는 offsetx 중 하나 및 IE의 오프셋을 제거 할 수 있습니다.