[JQUERY] 요소 내에서 마우스 위치를 얻을 수 JQuery와

요소 내에서 마우스 위치를 얻을 수 JQuery와

해결법

1. ---

   1.한 가지 방법은 부모 마우스 상대적인 위치에 이벤트에서 event.pageX 및 event.pageY 좌표를 변환하는 jQuery를 오프셋 방법을 사용하는 것입니다. 여기에 미래의 참조의 예입니다 :

   한 가지 방법은 부모 마우스 상대적인 위치에 이벤트에서 event.pageX 및 event.pageY 좌표를 변환하는 jQuery를 오프셋 방법을 사용하는 것입니다. 여기에 미래의 참조의 예입니다 :

   $("#something").click(function(e){
      var parentOffset = $(this).parent().offset(); 
      //or $(this).offset(); if you really just want the current element's offset
      var relX = e.pageX - parentOffset.left;
      var relY = e.pageY - parentOffset.top;
   });
   

2. ---

   2.현재 클릭 된 요소에 클릭의 위치를 ​​얻으려면 이 코드를 사용

   현재 클릭 된 요소에 클릭의 위치를 ​​얻으려면 이 코드를 사용

   $("#specialElement").click(function(e){
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
   }); 
   

3. ---

   3.나는이 코드 조각은 아주 좋은를 사용합니다 :)

   나는이 코드 조각은 아주 좋은를 사용합니다 :)

       <script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
   <script language="javascript">
   $(document).ready(function(){
       $(".div_container").mousemove(function(e){
           var parentOffset = $(this).parent().offset();
           var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
           var relativeYPosition = (e.pageY - parentOffset.top);
           $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
       }).mouseout(function(){
           $("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
       });
   });
   </script>
   

4. ---

   4.@AbdulRahim의 대답은 거의 정확합니다. 그러나 나는 (더 참조) 대신 아래와 같은 기능을 제안한다 :

   @AbdulRahim의 대답은 거의 정확합니다. 그러나 나는 (더 참조) 대신 아래와 같은 기능을 제안한다 :

   function getXY(evt, element) {
                   var rect = element.getBoundingClientRect();
                   var scrollTop = document.documentElement.scrollTop?
                                   document.documentElement.scrollTop:document.body.scrollTop;
                   var scrollLeft = document.documentElement.scrollLeft?                   
                                   document.documentElement.scrollLeft:document.body.scrollLeft;
                   var elementLeft = rect.left+scrollLeft;  
                   var elementTop = rect.top+scrollTop;
   
                   x = evt.pageX-elementLeft;
                   y = evt.pageY-elementTop;
   
                   return {x:x, y:y};
               }
   
   
   
   
               $('#main-canvas').mousemove(function(e){
                   var m=getXY(e, this);
                   console.log(m.x, m.y);
               });
   

5. ---

   5.이 솔루션은 IE를 포함한 모든 주요 브라우저를 지원합니다. 또한 스크롤을 담당한다. 첫째, 효율적 재귀 함수를 사용하지 않고, 페이지의 요소의 위치를 ​​검색한다. 그런 다음 (요소가 예를 들어, 이미지 또는 사업부를 할 수 있습니다) 페이지에 마우스 클릭 상대의 x와 y를 가져오고 요소에 상대적인 위치 인 답을 얻을 수있는 뺄셈을 수행합니다

   이 솔루션은 IE를 포함한 모든 주요 브라우저를 지원합니다. 또한 스크롤을 담당한다. 첫째, 효율적 재귀 함수를 사용하지 않고, 페이지의 요소의 위치를 ​​검색한다. 그런 다음 (요소가 예를 들어, 이미지 또는 사업부를 할 수 있습니다) 페이지에 마우스 클릭 상대의 x와 y를 가져오고 요소에 상대적인 위치 인 답을 얻을 수있는 뺄셈을 수행합니다

   function getXY(evt) {
       var element = document.getElementById('elementId');  //replace elementId with your element's Id.
       var rect = element.getBoundingClientRect();
       var scrollTop = document.documentElement.scrollTop?
                       document.documentElement.scrollTop:document.body.scrollTop;
       var scrollLeft = document.documentElement.scrollLeft?                   
                       document.documentElement.scrollLeft:document.body.scrollLeft;
       var elementLeft = rect.left+scrollLeft;  
       var elementTop = rect.top+scrollTop;
   
           if (document.all){ //detects using IE   
               x = event.clientX+scrollLeft-elementLeft; //event not evt because of IE
               y = event.clientY+scrollTop-elementTop;
           }
           else{
               x = evt.pageX-elementLeft;
               y = evt.pageY-elementTop;
       }
   

6. ---

   6.당신이 당신의 부모 요소는 "위치 : 상대"가 될 수 있도록한다면, 그것은 물건 당신은 온 셈 추적 마우스 이벤트에 대한 "오프셋 부모"가됩니다. 따라서 jQuery를 "위치 ()"이 상대적 것이다.

   당신이 당신의 부모 요소는 "위치 : 상대"가 될 수 있도록한다면, 그것은 물건 당신은 온 셈 추적 마우스 이벤트에 대한 "오프셋 부모"가됩니다. 따라서 jQuery를 "위치 ()"이 상대적 것이다.

7. ---

   7.다음은 또한 당신에게 당신이 그것을 필요로 할 경우 점의 퍼센트 위치를 제공 하나입니다. https://jsfiddle.net/Themezly/2etbhw01/

   다음은 또한 당신에게 당신이 그것을 필요로 할 경우 점의 퍼센트 위치를 제공 하나입니다. https://jsfiddle.net/Themezly/2etbhw01/

   기능 ThzhotspotPosition (EVT, 엘, hotspotsize, 퍼센트) { VAR은 el.offset = () 좌측 좌측.; . VAR 위쪽 el.offset = () 위쪽; VAR 핫스팟 = hotspotsize? hotspotsize : 0; 경우 (퍼센트) { X = (evt.pageX은 - 좌측 - (핫스팟 / 2)) / el.outerWidth () * 100 + '%'를; Y = (evt.pageY - 상부 - (핫스팟 / 2)) / el.outerHeight () * 100 + '%'; } 다른 { X = (evt.pageX - 좌 - (핫스팟 / 2)); Y = (evt.pageY - 상부 - (핫스팟 / 2)); } 반환 { X : X, Y : Y }; } () {(기능 $ $ ( '. 상자'). (함수 (예 클릭) { VAR 마력 = ThzhotspotPosition (예, $ (이), (20), TRUE); // 진정한 = 퍼센트 | 거짓 또는 전혀 ATTR = PX VAR 핫스팟 = $ ( '

   '). CSS ({ 왼쪽 : hp.x, 상단 : hp.y, }); $ (이)으로 .Append (핫스팟); $ ( "범위") 텍스트 ( "X :"+ hp.x + ", Y :"+ hp.y). }); }); .box { 폭 : 400 픽셀; 높이 : 400 픽셀; 배경 : #efefef; 여백 : 20 픽셀; 패딩 : 20 픽셀; 위치 : 상대; 상단 : 20 픽셀; 왼쪽 : 20 픽셀; } .hotspot { 위치 : 절대; 왼쪽 : 0; 최고 : 0; 높이 : 20 픽셀; 폭 : 20 픽셀; 배경 : 녹색; 경계 반경 : 20 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   : 핫스팟 위치에있을

8. ---

   8.나는이 제안 :

   나는이 제안 :

   e.pageX - this.getBoundingClientRect().left
   

from https://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element by cc-by-sa and MIT license