jQuery의 요소에 대한 클릭 좌표를 정확하게 얻는 방법은 무엇입니까?

jQuery를 사용하여 대상 요소의 클릭 좌표 가져오기

jQuery를 사용하여 HTML 요소의 클릭 이벤트를 처리할 때 기준 위치를 찾으려고 하면 잘못된 결과가 발생할 수 있습니다. 요소. 이는 사용 가능한 jQuery 메소드에 대한 오해 때문일 수 있습니다.

event.pageX 및 event.pageY

이러한 속성은 문서를 기준으로 마우스 위치를 제공합니다. 이는 대상 요소에만 국한되지 않습니다.

offset()

이 메서드는 상위 요소를 기준으로 요소의 오프셋 위치를 제공합니다. 페이지에서 요소의 위치를 ​​결정하는 데 일반적으로 사용되지만 요소 자체를 기준으로 마우스 위치를 제공하지는 않습니다.

position()

offset()과 달리 이 메서드는 다음을 제공합니다. 직계 상위 요소에 대한 요소의 상대적 위치입니다. 내부 컨테이너 내부의 요소 위치를 가져오는 데 유용합니다.

예

이러한 방법 간의 차이점을 보여주기 위해 다음 HTML을 고려하세요.

<div>

그리고 다음 JavaScript 이벤트 핸들러:

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

#seek-bar를 클릭하면 첫 번째 콘솔 로그가 생성되는 것을 볼 수 있습니다. 페이지에서 요소의 절대 위치를 제공하는 offset()을 사용하기 때문에 잘못된 결과가 발생합니다. 그러나 두 번째 콘솔 로그는 position()을 사용하여 요소를 기준으로 올바른 마우스 위치를 제공합니다.

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