it-swarm-id.com

Javascript - Lacak posisi mouse

Saya berharap untuk melacak posisi kursor mouse, secara berkala setiap detik. Jadi pada dasarnya, ketika sebuah halaman dimuat - pelacak ini harus dimulai dan untuk (katakanlah) setiap 100 ms, saya harus mendapatkan nilai baru posX dan posY dan mencetaknya dalam formulir.

Saya mencoba kode berikut - tetapi nilainya tidak di-refresh - hanya nilai awal dari posX dan posY yang muncul di kotak formulir. Ada ide tentang bagaimana saya bisa menjalankan dan menjalankan ini?

<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout(mouse_position,100);

}
</script>

</head>

<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
128
Hari

Posisi mouse dilaporkan pada objek event yang diterima oleh handler untuk acara mousemove, yang dapat Anda lampirkan ke jendela (gelembung acara):

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var eventDoc, doc, body;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        // Use event.pageX / event.pageY here
    }
})();

(Perhatikan bahwa tubuh if itu hanya akan berjalan pada IE lama.)

Contoh tindakan di atas - ia menarik titik saat Anda menyeret mouse ke halaman. (Diuji pada IE8, IE11, Firefox 30, Chrome 38.)

Jika Anda benar-benar membutuhkan solusi berbasis-waktu, Anda menggabungkan ini dengan beberapa variabel status:

(function() {
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
        if (!pos) {
            // We haven't seen any movement yet
        }
        else {
            // Use pos.x and pos.y
        }
    }
})();

Sejauh yang saya ketahui, Anda tidak bisa mendapatkan posisi mouse tanpa melihat suatu peristiwa, sesuatu yang jawaban untuk pertanyaan Stack Overflow lainnya tampaknya mengonfirmasi.

Catatan tambahan : Jika Anda akan melakukan sesuatu setiap 100ms (10 kali/detik), cobalah untuk menjaga pemrosesan aktual yang Anda lakukan dalam fungsi tersebut sangat, sangat terbatas . Itu banyak pekerjaan untuk browser, terutama Microsoft yang lebih tua. Ya, pada komputer modern sepertinya tidak banyak, tetapi ada banyak hal yang terjadi di browser ... Jadi misalnya, Anda dapat melacak posisi terakhir yang Anda proses dan segera menebus jaminan dari pawang jika posisinya belum t berubah.

153
T.J. Crowder

Berikut ini solusinya, berdasarkan jQuery dan pendengar acara mouse (yang jauh lebih baik daripada polling biasa) di tubuh:

$("body").mousemove(function(e) {
    document.Form1.posx.value = e.pageX;
    document.Form1.posy.value = e.pageY;
})
60
solendil
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}

Buka konsol Anda (Ctrl + Shift + J), salin-tempel kode di atas dan gerakkan mouse Anda di jendela browser.

34
RegarBoy

Saya percaya bahwa kita terlalu memikirkan ini,

function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>
12
dGRAMOP

Apa yang saya pikirkan bahwa dia hanya ingin mengetahui posisi kursor X/Y daripada mengapa jawabannya rumit.

// Getting 'Info' div in js hands
var info = document.getElementById('info');

// Creating function that will tell the position of cursor
// PageX and PageY will getting position values and show them in P
function tellPos(p){
  info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);
* {
  padding: 0:
  margin: 0;
  /*transition: 0.2s all ease;*/
  }
#info {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  padding: 25px 50px;
}
<!DOCTYPE html>
<html>
  
  <body>
    <div id='info'></div>
        </body>
  </html>
8
Murtaza

Terlepas dari peramban, baris di bawah ini berfungsi agar saya mengambil posisi mouse yang benar.

event.clientX - event.currentTarget.getBoundingClientRect().left event.clientY - event.currentTarget.getBoundingClientRect().top

2

Kode berbasis ES6:

let handleMousemove = (event) => {
  console.log(`mouse position: ${event.x}:${event.y}`);
};

document.addEventListener('mousemove', handleMousemove);

Jika Anda perlu pelambatan untuk mousemoving, gunakan ini:

let handleMousemove = (event) => {
  console.warn(`${event.x}:${event.y}\n`);
};

let throttle = (func, delay) => {
  let prev = Date.now() - delay;
  return (...args) => {
    let current = Date.now();
    if (current - prev >= delay) {
      prev = current;
      func.apply(null, args);
    }
  }
};

// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));

di sini adalah contoh

2
oboshto