>웹 프론트엔드 >JS 튜토리얼 >clientX,pageX,offsetX,x,layerX,screenX,offsetLeft 차이 분석_javascript 기술

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft 차이 분석_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:32:301024검색

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 객체가 객체와 가장 가깝다는 것을 나타냅니다. Object"라고 되어 있지만 효과는 브라우저마다 다릅니다. FF에서는 위의 지침을 엄격하게 따르지만 IE6/7에서는 이 속성이 DOM 개체의 위치를 ​​직접 반환합니다. 그러나 IE8에서는 이 문제를 해결했지만 IE8에는 새로운 문제가 있습니다. IETester에서는 테스트 환경이 IE8이므로 IETester의 문제일 가능성도 배제할 수 없습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.