jQuery의 대상 요소를 기준으로 정확한 클릭 좌표를 얻는 방법은 무엇입니까?

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

특정 대상 요소에 대한 마우스 클릭의 정확한 위치를 얻으려면 전체 문서에 상대적인 위치를 결정하기 위해 pageX 및 pageY 속성을 활용하거나 특정 요소 내에서 상대적 위치를 설정하기 위해 offset() 메소드를 활용하는 것을 고려할 수 있습니다.

그러나 문서 내의 상대 위치가 필요한 경우 요소의 부모 또는 다른 포함 요소인 경우 position() 메서드를 사용할 수 있습니다. 다음은 이러한 메소드의 사용법을 보여주는 예입니다.

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

코드의 경우:

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

#을 기준으로 마우스 커서의 위치를 ​​검색하려는 의도입니다. 클릭 시 탐색 막대 요소. 그러나 e.target.offsetLeft를 빼는 것은 offsetLeft 속성이 부모를 기준으로 요소의 위치를 ​​반환하기 때문에 올바르지 않습니다. 대신 문서에 대한 x 좌표를 제공하는 e.pageX를 직접 활용해야 합니다.

자세한 내용은 제공된 코드 데모를 참조하세요.

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