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);
});
})
여기 에서 데모로 더 많은 정보 를 찾을 수 있습니다.
백분율 :
$('.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 가 브라우저에서 지원되는 경우 (모든 주요 브라우저가 실제로 지원함) jQuery Event 객체 는이 속성을 포함합니다.
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;
}
jquery
$(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);
});
});
'developer tip' 카테고리의 다른 글
| 주어진 (숫자) 분포로 난수 생성 (0) | 2020.08.11 |
|---|---|
| AngularJS : 지시문 범위에서 = & @의 차이점은 무엇입니까? (0) | 2020.08.11 |
| Pandas 데이터 프레임 fillna () 일부 열만 제자리에 있음 (0) | 2020.08.11 |
| / 로그인 또는 / 등록 리소스를 RESTfully 설계 하시겠습니까? (0) | 2020.08.11 |
| ggplot2에서 범례 항목 사이의 간격을 변경하는 방법이 있습니까? (0) | 2020.08.11 |