jQuery에서 대상 요소를 기준으로 클릭 좌표를 올바르게 얻는 방법은 무엇입니까?

jQuery에서 대상 요소의 클릭 좌표 식별

클릭 시 지정된 HTML 요소에서 마우스 포인터의 위치를 ​​확인하려면 다음을 수행할 수 있습니다. jQuery 이벤트 핸들러를 활용하세요. 그러나 최근 잘못된 결과가 반환되는 문제가 발생했습니다.

잘못된 위치 지정 결과 수정

제공된 초기 코드는 클릭 좌표를 기준으로 계산하려고 시도했습니다. event.pageX 및 event.target.offsetLeft 속성을 사용하는 대상 요소. 그러나 이 방법은 정확한 결과를 제공하지 못하는 것으로 확인되었습니다.

이벤트 좌표 이해

두 가지 유형의 마우스 포인터 좌표를 구별하는 것이 중요합니다.

• 문서 기준: 전체 문서를 기준으로 포인터의 위치를 ​​제공하는 event.pageX 및 event.pageY를 ​​사용하여 가져옵니다.
• 상대적 요소에: 문서 내 요소의 위치를 ​​결정하려면 offset() 메서드를 사용한 다음 포인터 좌표에서 오프셋 값을 빼야 합니다.

Position() 대 Offset()

이 맥락에서 position() 메서드는 이 시나리오와 관련이 없는 상위 컨테이너를 기준으로 요소의 위치를 ​​계산하므로 적절하지 않습니다. 반면 offset() 메서드는 문서를 기준으로 요소의 위치를 ​​제공하므로 클릭 좌표를 정확하게 계산할 수 있습니다.

개선된 코드

문제를 해결하여 대상 요소를 기준으로 클릭 좌표를 올바르게 결정하도록 코드가 수정되었습니다.

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

위 내용은 jQuery에서 대상 요소를 기준으로 클릭 좌표를 올바르게 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!