jQuery를 사용하여 대상 요소에서 클릭 좌표를 가져오는 방법
html 요소에 대해 다음 이벤트 핸들러가 있습니다.
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
클릭 시 #seek-bar에서 마우스 위치를 찾아야 합니다.위 코드가 작동해야 한다고 생각했을텐데 잘못된 결과가 나옵니다.
마우스 포인터의 위치를 가져오려고 하는 중입니까?relative단순히 마우스 포인터 위치에 요소를 추가합니다(또는 ).
이 데모를 사용해 보십시오: http://jsfiddle.net/AMsK9/
편집:
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(): 요소의 상대적 위치를 알려줍니다. 즉,
어떤 요소가 다른 요소 안에 포함되어 있다고 생각합니다.
예제:
<div id="imParent">
<div id="imchild" />
</div>
참조 : http://api.jquery.com/position/
HTML
<body>
<div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>
자바스크립트
$(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));
});
});
$('#something').click(function (e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
console.log(xPos, yPos);
});
시도해 보기:
jQuery(document).ready(function(){
$("#special").click(function(e){
$('#status2').html(e.pageX +', '+ e.pageY);
});
})
DEMO를 통해 자세한 정보를 확인할 수 있습니다.
백분율:
$('.your-class').click(function (e){
var $this = $(this); // or use $(e.target) in some cases;
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var posX = offset.left;
var posY = offset.top;
var x = e.pageX-posX;
x = parseInt(x/width*100,10);
x = x<0?0:x;
x = x>100?100:x;
var y = e.pageY-posY;
y = parseInt(y/height*100,10);
y = y<0?0:y;
y = y>100?100:y;
console.log(x+'% '+y+'%');
});
브라우저에서 MouseEvent.offsetX가 지원되는 경우(모든 주요 브라우저가 실제로 지원됨), jQueryEvent 개체에는 이 속성이 포함됩니다.
MouseEvent.offsetX 읽기 전용 속성은 해당 이벤트와 대상 노드의 패딩 에지 사이의 마우스 포인터의 X 좌표에 오프셋을 제공합니다.
$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});
여기에 링크 설명 입력
html
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
CSS
#myPosition{
background-color:red;
height:200px;
width:200px;
}
잡동사니
$(document).ready(function(){
$("#myPosition").click(function(e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
alert("X position: " + xPos + ", Y position: " + yPos);
});
});
언급URL : https://stackoverflow.com/questions/3234977/using-jquery-how-to-get-click-coordinates-on-the-target-element
'sourcecode' 카테고리의 다른 글
| Angularjs Clientside인지 Serverside인지 또는 둘 다인지 여부 (0) | 2023.10.20 |
|---|---|
| 마리아를 위한 Innodb 엔진의 변수DB (0) | 2023.10.20 |
| 상쇄간의 차이높이 및 고객높이 (0) | 2023.10.20 |
| 테이블 Excel VBA에 새 열 삽입 (0) | 2023.10.20 |
| PowerShell에서 EXE 출력 캡처 (0) | 2023.10.20 |