jQuery mendapatkan posisi mouse dalam suatu elemen

Saya berharap untuk membuat kontrol di mana pengguna dapat mengklik di dalam div, lalu seret mouse, lalu biarkan mouse untuk menunjukkan berapa lama mereka menginginkan sesuatu. (Ini untuk kontrol kalender, sehingga pengguna akan menunjukkan panjang, waktu, dari peristiwa tertentu)

Sepertinya cara terbaik untuk melakukan ini adalah dengan mendaftarkan acara "mousedown" pada div induk yang pada gilirannya mendaftarkan acara "mousemove" pada div hingga acara "mouseup" dipicu. Acara "mousedown" dan "mouseup" akan menentukan awal dan akhir rentang waktu dan saat saya mengikuti acara "mousemove", saya dapat secara dinamis mengubah ukuran rentang sehingga pengguna dapat melihat apa yang mereka lakukan. Saya mendasarkan ini pada bagaimana acara dibuat di kalender google.

Masalah yang saya alami adalah bahwa acara jQuery tampaknya hanya memberikan informasi koordinat mouse yang dapat diandalkan sehubungan dengan seluruh halaman. Apakah ada cara untuk mengetahui koordinat apa yang mengacu pada elemen induk?

Edit:

Inilah gambar dari apa yang saya coba lakukan:

Salah satu caranya adalah dengan menggunakan offsetmetode jQuery untuk menerjemahkan event.pageXdan event.pageYmengoordinasikan dari acara ke posisi mouse relatif terhadap induknya. Berikut ini contoh untuk referensi di masa mendatang:

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

Untuk mendapatkan posisi klik relatif terhadap elemen yang diklik saat
ini Gunakan kode ini

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

Saya menggunakan kode ini, cukup bagus :)

    <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 jawabannya hampir benar. Tapi saya sarankan fungsi di bawah ini sebagai pengganti (untuk referensi lebih lanjut):

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

Solusi ini mendukung semua browser utama termasuk IE. Ini juga menangani pengguliran. Pertama, ia mengambil posisi elemen relatif ke halaman secara efisien, dan tanpa menggunakan fungsi rekursif. Kemudian ia mendapat x dan y dari klik mouse relatif ke halaman dan melakukan pengurangan untuk mendapatkan jawaban yang merupakan posisi relatif terhadap elemen (elemen dapat berupa gambar atau div misalnya):

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

Jika Anda membuat elemen induk Anda menjadi "position: relative", maka itu akan menjadi "parent offset" untuk hal-hal yang Anda lacak aktivitas tetikusnya. Dengan demikian "posisi ()" jQuery akan relatif terhadap itu.

Ini adalah salah satu yang juga memberi Anda posisi persen jika Anda membutuhkannya. 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>

Saya akan menyarankan ini:

e.pageX - this.getBoundingClientRect().left