Javascript_javascript 기술에 따른 IE와 Firefox의 차이점 및 호환성 요약

window.event 개체의 차이점
IE: window.event 개체가 있습니다.
FF: window.event 개체가 없습니다. 이벤트 객체는 함수에 인수로 전달될 수 있습니다. 예를 들어 onmousemove=doMouseMove(event)

마우스의 현재 좌표를 가져옵니다
IE: event.x 및 event.y.
FF: event.pageX 및 event.pageY.
공통: 둘 다 event.clientX 및 event.clientY 속성을 가지고 있습니다.

마우스의 현재 좌표(+ 스크롤 막대가 굴러간 거리)
IE: event.offsetX 및 event.offsetY.
FF: event.layerX 및 event.layerY.

레이블의 x 및 y 좌표 위치: style.posLeft 및 style.posTop
IE: 예.
FF: 아니요.
공통: object.offsetLeft 및 object.offsetTop.


양식의 높이와 너비를 가져옵니다.
IE: document.body.offsetWidth 및 document.body.offsetHeight. 참고: 현재 페이지에는 body 태그가 있어야 합니다.
FF: window.innerWidth 및 window.innerHegiht, document.documentElement.clientWidth 및 document.documentElement.clientHeight.
공통: document.body.clientWidth 및 document.body.clientHeight.

이벤트 추가
IE: element.attachEvent("onclick", func);.
FF: element.addEventListener("click", func, true).
범용: element.onclick=func. onclick 이벤트를 사용할 수도 있지만 onclick의 효과는 위의 두 메서드와 다릅니다. onclick은 하나의 프로세스만 실행하는 반면, attachmentEvent와 addEventListener는 프로세스 목록, 즉 여러 프로세스를 실행합니다. 예: element.attachEvent("onclick", func1);element.attachEvent("onclick", func2) 그러면 func1과 func2가 모두 실행됩니다.

Broken Bridge Canxue는 바인딩 이벤트 추가 및 삭제를 위한 일반 함수를 작성한 적이 있습니다. 다음 기사를 확인할 수 있습니다: "JavaScript 크로스 브라우저 이벤트 바인딩 기능 추가 및 삭제"

태그의 사용자 정의 속성
IE: 태그 div1에 대해 속성 값이 정의된 경우 해당 값은 div1.value 및 div1["value"]로 얻을 수 있습니다.
FF: div1.value 및 div1["value"]를 사용하여 얻을 수 없습니다.
일반: div1.getAttribute("value").

상위 노드, 하위 노드 및 노드 삭제
IE: parentElement, parement.children, element.romoveNode(true).
FF: parentNode, parentNode.childNodes, node.parentNode.removeChild(노드).


clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
screenX: 디스플레이 화면에서 마우스의 좌표입니다.
clientX: 페이지 표시 영역에서 마우스의 좌표입니다.
참고: 위 두 가지는 모든 브라우저에 공통됩니다. 다음은 고유한 방법입니다.

pageX: FF에만 해당되며 페이지에서 마우스의 위치는 페이지의 왼쪽 상단에서 시작됩니다. IE에서는 직접적으로 위치를 지정할 수 없습니다. 대체된 속성.
레이어 요소에 테두리가 있는 경우 좌표 원점은 콘텐츠 영역의 왼쪽 상단이 아닌 테두리의 왼쪽 상단에 있습니다.
offsetX: IE의 고유한 "이벤트를 트리거한 요소"를 기준으로 한 마우스 위치는 테두리의 왼쪽 상단이 아닌 콘텐츠 영역의 왼쪽 상단에 위치합니다! 이 속성은 상대적으로 사용하기 쉽습니다. FF에는 직접 대체 속성이 없으므로 마우스 포인트가 어디에 있는지 확인하는 것이 매우 편리합니다.
x: IE에 고유하며, layerX와 동일한 효과를 가지며, layerX의 직접 대체 속성으로 사용할 수 있습니다.
참고: IE와 FF의 위치 지정에는 1픽셀의 차이가 있습니다. 실제로 IE의 위치 지정은 0부터 시작하고 FF의 위치 지정은 1부터 시작합니다. FF는 항상 IE보다 1px 더 크며, 실제 상황에 따라 처리됩니다.

offsetLeft: 이 속성은 이벤트 객체의 속성이 아니며 DOM 객체에 속합니다. 이 속성은 DOM 객체의 계층적 관계에서 DOM 객체가 객체와 가장 가깝다는 것을 나타냅니다. "개체" 위치가 설정되어 있지만 브라우저마다 효과가 다릅니다.

FF에서는 위의 지시 사항을 엄격하게 따르지만 IE6/7에서는 이 속성이 DOM 객체의 위치를 ​​직접 상위 객체로 반환하는데, IE8에서는 이 문제를 해결하지만 IE8에서는 새로운 문제가 발생합니다. 다른 브라우저는 상위 개체의 콘텐츠 영역 왼쪽 상단부터 위치 지정을 시작하지만, IETester의 테스트 환경은 IE8이므로 그럴 수 없습니다. IETester에 문제가 있다는 것을 배제했습니다.