jQuery는 요소 내에서 마우스 위치를 얻는다

jQuery는 요소 내에서 마우스 위치를 얻는다

---

사용자가 div 내부를 클릭 한 다음 마우스를 드래그 한 다음 마우스를 올려 놓아 원하는 시간을 표시 할 수있는 컨트롤을 만들고 싶었습니다. (이것은 달력 제어를위한 것이므로 사용자는 특정 이벤트의 시간을 시간 단위로 표시합니다)

이를 수행하는 가장 좋은 방법은 상위 div에 "mousedown"이벤트를 등록하고 "mouseup"이벤트가 트리거 될 때까지 div에 "mousemove"이벤트를 등록하는 것입니다. "mousedown"및 "mouseup"이벤트는 시간 범위의 시작과 끝을 정의하며 "mousemove"이벤트를 수행함에 따라 사용자가 수행중인 작업을 볼 수 있도록 범위의 크기를 동적으로 변경할 수 있습니다. Google 캘린더에서 이벤트가 생성되는 방식을 기반으로했습니다.

내가 겪고있는 문제는 jQuery 이벤트가 전체 페이지와 관련하여 신뢰할 수있는 마우스 좌표 정보 만 제공하는 것 같습니다. 부모 요소와 관련하여 좌표가 무엇인지 식별하는 방법이 있습니까?

편집하다:

내가하려는 일의 그림은 다음과 같습니다.

---

한 가지 방법은 jQuery를 사용하는 것입니다 offset변환하는 방법 event.pageX과 event.pageY부모를 기준으로 마우스 위치로 이벤트에서 좌표를. 다음은 나중에 참조 할 수있는 예입니다.

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

---

현재 클릭 한 요소를 기준으로 클릭 위치를 가져 오려면
이 코드를 사용하십시오.

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

---

이 코드를 사용하면 꽤 좋습니다 :)

    <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>

---

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

---

This solution supports all major browsers including IE. It also takes care of scrolling. First, it retrieves the position of the element relative to the page efficiently, and without using a recursive function. Then it gets the x and y of the mouse click relative to the page and does the subtraction to get the answer which is the position relative to the element (the element can be an image or div for example):

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

---

If you make your parent element be "position: relative", then it will be the "offset parent" for the stuff you're tracking mouse events over. Thus the jQuery "position()" will be relative to that.

---

Here is one that also gives you percent position of the point in case you need it. https://jsfiddle.net/Themezly/2etbhw01/

function ThzhotspotPosition(evt, el, hotspotsize, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  var hotspot = hotspotsize ? hotspotsize : 0;
  if (percent) {
    x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
    y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
  } else {
    x = (evt.pageX - left - (hotspot / 2));
    y = (evt.pageY - top - (hotspot / 2));
  }

  return {
    x: x,
    y: y
  };
}



$(function() {

  $('.box').click(function(e) {

    var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px

    var hotspot = $('<div class="hotspot">').css({
      left: hp.x,
      top: hp.y,
    });
    $(this).append(hotspot);
    $("span").text("X: " + hp.x + ", Y: " + hp.y);
  });


});

.box {
  width: 400px;
  height: 400px;
  background: #efefef;
  margin: 20px;
  padding: 20px;
  position: relative;
  top: 20px;
  left: 20px;
}

.hotspot {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  background: green;
  border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Hotspot position is at: <span></span></p>
</div>

---

I would suggest this:

e.pageX - this.getBoundingClientRect().left

참고 URL : https://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element