JQuery получить позицию мыши внутри элемента

Я надеялся создать элемент управления, в котором пользователь мог бы щелкнуть внутри div, затем перетащить мышь, а затем отпустить мышью, чтобы указать, как долго они хотят, чтобы что-то было. (Это для управления календарем, поэтому пользователь будет указывать длину, по времени, определенного события)

Похоже, что лучший способ сделать это - зарегистрировать событие "mousedown" в родительском div, которое, в свою очередь, регистрирует событие "mousemove" в div до тех пор, пока не будет запущено событие "mouseup". События "mousedown" и "mouseup" будут определять начало и конец временного диапазона, и, следуя "mousemove" событиям, я могу динамически изменять размер диапазона, чтобы пользователь мог видеть, что они делают. Я основывал это на том, как события создаются в календаре Google.

Проблема, с которой я сталкиваюсь, заключается в том, что событие jQuery, по-видимому, обеспечивает только надежную информацию о координатах мыши в отношении всей страницы. Есть ли способ определить, какие координаты относятся к родительскому элементу?

Edit:

Вот картина того, что я пытаюсь сделать: alt text

ОТВЕТЫ

Ответ 1

Один из способов - использовать метод 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 offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

Ответ 2

Чтобы получить позицию клика относительно текущего элемента clicked
Используйте этот код 

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

Ответ 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

Это решение поддерживает все основные браузеры, включая IE. Он также заботится о прокрутке. Во-первых, он эффективно извлекает положение элемента относительно страницы и не использует рекурсивную функцию. Затем он получает x и y щелчка мыши относительно страницы и выполняет вычитание, чтобы получить ответ, который является позицией относительно элемента (например, элемент может быть изображением или div):

function getXY(evt) {
    var element = document.getElementById('elementId');  //replace elementId with your element 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;
    }

Ответ 5

Ответ на

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

Ответ 6

Если вы сделаете свой родительский элемент "position: relative", тогда он будет "родителем смещения" для материала, над которым вы отслеживаете события мыши. Таким образом, "позиция()" jQuery будет относиться к этому.

Ответ 7

Вот один из них, который также дает вам процентное положение точки в случае необходимости. 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>

Ответ 8

Я бы предложил следующее:

e.pageX - this.getBoundingClientRect().left