우선, 다양한 브라우저의 이벤트 위치 속성 분석:
1. IE의 event.x, event.y는 이벤트 트리거 요소의 상위 요소의 외부 세계를 기반으로 합니다. 기준점으로 (스크롤 거리 제외)
2. Firefox의 event.pageX, event.pageY는 본문 요소를 기준점으로 사용합니다 (스크롤 거리 포함)
3. event.clientY는 상위 요소를 사용합니다. 브라우저의 왼쪽 모서리를 기준점으로 사용(스크롤링 거리 제외)
4. IE의 event.offsetX, event.offsetY 및 Firefox의 event.layerX, event.layerY는 이벤트 트리거 내부 경계의 왼쪽 상단을 차지합니다. 요소를 기준점으로 사용 (스크롤 거리 포함, 테두리가 있는 경우 음수가 나타날 수 있음)
DOM 객체 높이 속성 분석
1. 개체의 스크롤 높이
2. scrollLeft: 개체 위치를 설정하거나 가져옵니다. 왼쪽 테두리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다.
3. 개체의 상단과 창에 표시되는 콘텐츠의 상단
4. scrollWidth: 개체를 가져옵니다. 스크롤 너비
5. offsetHeight: 지정된 레이아웃 또는 상위 좌표를 기준으로 개체의 높이를 가져옵니다. offsetParent 속성
6. offsetLeft: offsetParent 속성 Side position
으로 지정된 상위 좌표 또는 레이아웃을 기준으로 계산된 개체의 위쪽 위치를 가져옵니다. 7. offsetTop 속성으로 지정된 레이아웃 또는 상위 좌표로
위 분석을 통해 위치를 가져오는 두 개의 함수를 작성합니다
// X축 위치 가져오기
function mouseX(evt) {
// firefox
if (evt.pageX) return evt.pageX;// IE
else if (evt.clientX)
return evt.clientX (document.documentElement.scrollLeft ? document.documentElement.scrollLeft: document.body.scrollLeft);
else return null;
}
// Y축 위치 가져오기
function mouseY(evt) {
/ / firefox
if (evt .pageY) return evt.pageY;// IE
else if (evt.clientY)
return evt.clientY (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) ;
그렇지 않으면 null을 반환합니다.
}
Html 컨트롤의 절대 위치를 가져오는 두 가지 방법
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop ;
while (e = e.offsetParent) {
x = e.offsetLeft;
y = e.offsetTop;
}
alert("x:" x " ," "y :" y);
}
function getAbsPoint(obj){
var x, y;
oRect = obj.getBoundingClientRect();
x = oRect.left
y = oRect.top
alert("(" x "," y ")")
}
주의
document.body .scrollLeft, document .body.scrollTop은 IE6 이전 버전에서만 사용됩니다. IE6에서는 DOCTYPE이 선언되지 않거나 전환 DOCTYPE이 선언되면 IE6은 document.documentElement.scrollLeft를 사용하여 마우스의 절대 위치를 얻습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
