jQuery를 사용하여 대상 요소를 기준으로 정확한 마우스 클릭 좌표를 얻는 방법은 무엇입니까?
- Mary-Kate Olsen원래의
- 2024-12-05 22:51:14637검색
jQuery를 사용하여 대상 요소의 마우스 클릭 좌표 이해
jQuery를 사용하여 HTML 요소의 클릭 이벤트를 처리할 때 마우스 좌표를 정확하게 검색하는 방법을 아는 것이 중요합니다. 대상 요소에 대한 포인터입니다. 자세한 예를 통해 이 주제를 탐색하고 명확하게 살펴보겠습니다.
문제 진단
다음 이벤트 핸들러를 고려하세요.
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
목표는 마우스 포인터의 상대적인 위치를 얻는 것입니다. 클릭 순간의 #seek-bar 요소. 그러나 제공된 코드는 잘못된 결과를 제공할 수 있습니다.
위치 속성 이해
1. event.pageX, event.pageY:
이러한 속성은 전체 문서를 기준으로 마우스 포인터의 좌표를 제공합니다.
참조: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
이 함수는 포함 문서 내 요소의 오프셋 위치(페이지 왼쪽 상단 모서리로부터의 거리)를 반환합니다.
참조: http://api.jquery.com/offset/
3. position():
이 함수는 포함 문서 내에서 요소의 위치(상위 요소를 기준으로)를 반환합니다.
참조: http://api .jquery.com/position/
초기 문제를 해결하려면 이러한 위치 속성과 용도를 고려하는 것이 중요합니다. 이 경우 #seek-bar를 기준으로 마우스 포인터의 위치를 얻으려면 offsetLeft 대신 offset() 함수를 활용해야 합니다.
수정된 코드:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
예 데모
이러한 위치 속성 간의 차이점을 설명하기 위해 다음은 HTML 스니펫과 해당 JavaScript 코드의 예입니다.
HTML
<body> <div>
자바스크립트
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
작성자 이 div를 클릭하면 사용된 위치 속성에 따라 뚜렷한 결과를 관찰할 수 있습니다.
위 내용은 jQuery를 사용하여 대상 요소를 기준으로 정확한 마우스 클릭 좌표를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!