jQuery를 사용하여 대상 요소에서 클릭 좌표를 얻는 방법

109

내 html 요소에 대해 다음 이벤트 처리기가 있습니다.

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

클릭 할 때 # seek-bar에서 마우스의 위치를 찾아야합니다. 위의 코드가 작동해야한다고 생각했지만 잘못된 결과를 제공합니다.

— 로마 인
소스

4

요소, 뷰포트 또는 전체 문서에 상대적인 위치?

— James

나는 e.layerX-e.target.offsetLeft를 사용하여 작동하도록 만들었고 Oprea의 경우 방금 e.offsetX를 사용했습니다

— Roman

반응 형 사이트에서 얻으려면. 이 기사를 시도해보십시오. 반응 형 사이트에서도 얻을 수 있습니다. kvcodes.com/2014/03/...

— Kvvaradha

235

마우스 포인터 위치 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));
    });
});

9

예를 들어 +1 ... 여기에 코드를 추가했지만 링크가 죽으면이 질문이 나중에 쓸모 없게된다면 여기에 각각의 코드와 간단한 설명을

— 넣겠습니다.

2

의 경우를 수행하는 더 간단한 방법이 있습니다 '#B'. e.offsetX및 e.offsetY. 편집하고 싶은 것 같아요. 나는 이미 여기 에서 바이올린을 업데이트했습니다 . 게시물 덕분에이 솔루션을 찾았으므로 감사합니다.

— toto_tico

감사합니다. 개인적으로 offset () 및 position ()과 혼동했기 때문에 더 자세한 설명이 필요한 사람은 stackoverflow.com/questions/3202008/… 을 읽을 수 있습니다. 편의를 위해

— simongcc

나는 하단에 고정 된 요소를 가지고 있었는데-그것은 100 % 너비 였고, 그래서 나는 창 너비를 posX로 대신 사용했습니다-그래서 사용자가 : after css 규칙으로 만들어진 "X"를 클리 킹하고 있는지 확인할 수있었습니다. 오른쪽 상단에있었습니다.

— amurrell

좋은 예이지만 .position ()과 .offset ()의 차이점이 무엇인지 분명하지 않습니다. #C를 클릭하면 #C의 부모 요소 내부에서 마우스 위치가 반환되는지 확인하기 위해 일부 상위 div에서 요소 #C를 래핑해야합니다.

— amik

15

$('#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);
});

— Nisar
소스

3

이 시도:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

여기 에서 데모로 더 많은 정보 를 찾을 수 있습니다.

— Krunal
소스

1

백분율 :

$('.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+'%');
});

— l2aelba
소스

1

MouseEvent.offsetX 가 브라우저에서 지원되는 경우 (모든 주요 브라우저가 실제로 지원함) jQuery Event 객체 는이 속성을 포함합니다.

MouseEvent.offsetX 읽기 전용 속성은 해당 이벤트와 대상 노드의 패딩 가장자리 사이에 마우스 포인터의 X 좌표 오프셋을 제공합니다.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— Memet Olsen
소스

0

여기를 참조하십시오 여기 에 링크 설명을 입력하십시오

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);
    });
});

— 에어 블랙
소스