jQuery 요소 내에서 마우스 위치 가져오기

jQuery 요소 내에서 마우스 위치 가져오기

저는 사용자가 div 내부를 클릭한 다음 마우스를 끌어서 원하는 시간을 표시할 수 있는 컨트롤을 만들고 싶었습니다. (이는 일정관리 컨트롤을 위한 것이므로 사용자가 특정 이벤트의 길이(시간)를 나타냅니다.)

이렇게 하는 가장 좋은 방법은 부모 div에 "마우스다운" 이벤트를 등록하는 것으로 보이며, 이 이벤트는 "마우스업" 이벤트가 트리거될 때까지 div에 "마우스다운" 이벤트를 등록합니다."마우스다운" 및 "마우스업" 이벤트는 시간 범위의 시작과 끝을 정의하며, "마우스 이동" 이벤트를 추적할 때 사용자가 범위의 크기를 동적으로 변경하여 사용자가 수행 중인 작업을 볼 수 있도록 할 수 있습니다.저는 이것을 구글 캘린더에서 이벤트가 생성되는 방식을 기반으로 했습니다.

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

편집:

여기 제가 하려는 일의 사진이 있습니다.

한 가지 방법은 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;
});

클릭한 현재 요소를 기준으로 클릭 위치를 확인하려면
이 코드 사용

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

@압둘라힘의 대답은 거의 맞습니다.그러나 아래 기능을 대체할 것을 제안합니다(추가 참조용).

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

이 솔루션은 IE를 포함한 모든 주요 브라우저를 지원합니다.또한 스크롤도 처리합니다.첫째, 재귀 함수를 사용하지 않고 페이지에 대한 요소의 위치를 효율적으로 검색합니다.그런 다음 페이지에 상대적인 마우스 클릭의 x와 y를 얻고 요소에 상대적인 위치인 답을 얻기 위해 감산을 수행합니다(예: 요소는 이미지 또는 div일 수 있음).

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

필요에 따라 포인트의 백분율 위치를 알려주는 것도 있습니다.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>

부모 요소를 "위치: 상대"로 만들면 마우스 이벤트를 추적하는 항목에 대한 "오프셋 부모"가 됩니다.따라서 jQuery "position()"은 이 값에 상대적입니다.

다음과 같이 제안합니다.

e.pageX - this.getBoundingClientRect().left

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