Q: 이벤트 소스(event.target| |event.srcElement)?
정답: offsetX, offsetY. 그런데 FF에서는 지원하지 않는데 어떻게 해야 하나요?
1. 먼저 브라우저에 표시되는 문서 영역의 왼쪽 상단을 기준으로 마우스 위치를 가져옵니다.
2. 그런 다음 브라우저에 표시되는 문서 영역의 왼쪽 상단을 기준으로 이벤트 소스의 위치를 ​​가져옵니다.
🎜> 3. 빼서 하루라고 부르세요.
어떤 사람들은 2단계를 어떻게 해야 하느냐고 물을 수도 있습니다. 글쎄, 좋은 사람들은 끝까지 해낸다!
HTMLElement.getBoundingClientRect() 메소드
반환 값은 다음과 같습니다: {top:xx, right:xx, Bottom:xx, left:xx, width:xx, height:xx}
즉, 요소 위치 정보가 제공되며 우리가 해야 할 일은 다음과 같습니다:




코드 복사


코드는 다음과 같습니다.


var box = (e.target || e.srcElement).getBoundingClientRect(),
offsetX = e.clientX - box.left, offsetY = e.clientY - box.top;
테스트 결과 모든 브라우저는 event.offsetX, event.offsetY와 일치합니다(물론 FF는 제외).

제 예에서는 원래는 scrollLeft, scrollTop, clientLeft, clientTop도 감지되었습니다. 그 중 몇몇은 문제를 일으킬 것이라고 생각했으며 테스트 결과는 다음과 같습니다.
scrollTop을 제외하고 다른 모든 것은 0입니다(물론 scrollLeft는 가로 스크롤 막대가 없기 때문입니다)
ScrollTop은 각 브라우저에서 다르게 동작합니다. ,
body.scrollTop의 경우
 IE, FF, Opera: 0
Chrome, Safari: 스크롤 업 거리
documentElement.scrollTop의 경우
IE, FF, Opera: 스크롤 최대 거리
크롬, 사파리: 0
관련 라벨:
원천:php.cn
이전 기사:JavaScript 고급 프로그래밍 XML, Ajax 연구 노트_javascript 기술 다음 기사:Javascript 연구 노트는 Operator_javascript 기술을 삭제합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿