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

답변

이 솔루션은 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;
    }

답변

부모 요소를 “position : relative”로 설정하면 마우스 이벤트를 추적하는 항목에 대한 “offset parent”가됩니다. 따라서 jQuery “position ()”은 이에 상대적입니다.

답변

다음은 필요할 때 포인트의 백분율 위치를 제공하는 것입니다.
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>

스 니펫 확장