জাভাস্ক্রিপ্ট - মাউসের অবস্থান ট্র্যাক করুন

160

আমি মাউস কার্সারের অবস্থানটি পর্যায়ক্রমে প্রতিটি টি এমসেকেন্ডগুলি ট্র্যাক করার আশা করছি। সুতরাং মূলত, যখন কোনও পৃষ্ঠা লোড হয় - এই ট্র্যাকারটি শুরু হওয়া উচিত এবং প্রতি 100 এমএসের জন্য (বলুন), আমার পসএক্স এবং পসওয়াইয়ের নতুন মান পাওয়া উচিত এবং এটি ফর্মটিতে মুদ্রণ করা উচিত।

আমি নিম্নলিখিত কোডটি চেষ্টা করেছিলাম - তবে মানগুলি রিফ্রেশ হয় না - কেবলমাত্র পোস্টএক্সএক্সের প্রাথমিক মান এবং পজওয়াই ফর্ম বাক্সগুলিতে প্রদর্শিত হয়। আমি কীভাবে এটি চালিয়ে যেতে পারি তা সম্পর্কে কোনও ধারণা?

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

javascript

— হরি
সূত্র

সমস্যাটি হ'ল eventদ্বিতীয় বার যখন ফাংশনটি ডাকা হয় তখন কোনও বস্তু থাকবে না । আপনার ব্যবহারের চেয়ে সম্ভবত কিছু ইভেন্ট শোনা উচিত setTimeout।

— ফেলিক্স ক্লিং

হ্যাঁ, তবে মাউস পজিশন () ফাংশনটি প্রতি 100 মিলিসেকেন্ডে নিজেকে কল করে রাখা উচিত নয়। এটি আসলে অসীম পুনরাবৃত্তির ক্রিয়াকলাপের মতো আচরণ করা উচিত নয়?

— হরি

2

জাভাস্ক্রিপ্টে সেটইন্টারভাল () -তে ক্যাপচার মাউসের অবস্থানের

— শ্যাডো উইজার্ড আপনার পক্ষে

@Titan: হ্যাঁ, কিন্তু আমি সন্দেহ যে এটা ত্রুটি কারণ window.eventহতে হবে undefinedবা null। কোনও অনুষ্ঠান না থাকলে কোনও eventবস্তু নেই।

— ফেলিক্স ক্লিং

1

আগ্রহের বাইরে, এটার প্রয়োগ কী?

— সুপারউবারডুপার

178

মাউসের অবস্থানটি রিপোর্ট করা হয়েছে eventmousemoveইভেন্টটির জন্য কোনও হ্যান্ডলার দ্বারা প্রাপ্ত বস্তুর , যা আপনি উইন্ডোতে (ইভেন্ট বুদবুদ) সংযুক্ত করতে পারেন:

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

(মনে রাখবেন যে এর মূল অংশটি ifকেবল পুরানো আইইতে চলবে))

কর্মের উপরের উদাহরণ - আপনি পৃষ্ঠার উপরে আপনার মাউসকে টেনে আনতে বিন্দুগুলি আঁকবে। (আইই 8, আইই 11, ফায়ারফক্স 30, ক্রোম 38 এ পরীক্ষিত)

আপনার যদি সত্যিই টাইমার-ভিত্তিক সমাধানের প্রয়োজন হয় তবে আপনি এটিকে কিছু স্টেট ভেরিয়েবলের সাথে একত্রিত করুন:

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

আমি যতদূর সচেতন, কোনও ইভেন্ট না দেখে আপনি মাউস পজিশনটি পেতে পারবেন না, এটি যা অন্য স্ট্যাক ওভারফ্লো প্রশ্নের উত্তর দেয় নিশ্চিত করেছে বলে মনে হচ্ছে।

পার্শ্ব দ্রষ্টব্য : আপনি যদি প্রতি 100 মিঃ (10 বার / সেকেন্ড) কিছু করতে চলেছেন তবে সেই ফাংশনে আপনি যে আসল প্রসেসিং করছেন তা খুব, খুব সীমাবদ্ধ রাখার চেষ্টা করুন । এটি ব্রাউজারের জন্য অনেক কাজ, বিশেষত প্রবীণ মাইক্রোসফ্টগুলির জন্য। হ্যাঁ, আধুনিক কম্পিউটারগুলিতে এটি তেমনটি মনে হয় না তবে ব্রাউজারগুলিতে অনেক কিছু চলছে ... সুতরাং উদাহরণস্বরূপ, আপনি সম্ভবত শেষ প্রক্রিয়াটি ট্র্যাক করে রাখতে পারেন এবং হ্যান্ডলারের কাছ থেকে জামিন অবিলম্বে যদি অবস্থানটি না থাকে তবে ' টি পরিবর্তিত হয়েছে।

— টিজে ক্রাউডার
সূত্র

66

JQuery এবং মাউসের ইভেন্ট শ্রোতার উপর ভিত্তি করে একটি সমাধান এখানে দেওয়া হয়েছে (যা নিয়মিত ভোটদানের চেয়ে অনেক ভাল)

$("body").mousemove(function(e) {
    document.Form1.posx.value = e.pageX;
    document.Form1.posy.value = e.pageY;
})

— solendil
সূত্র

আমি যেমনটি বলেছি, নিয়মিত ভোটদান হ'ল আমি যা করতে চাই। আমি মাউস ইভেন্টগুলিতে পরিবর্তনগুলি ট্র্যাক করছি না, আমি কেবল প্রতিটি x মিলিসেকেন্ডে মাউস অবস্থানটি ক্যাপচার করতে দেখছি (মাউস সরানো হয়েছে কিনা তা নির্বিশেষে)।

— হরি

3

কেন আপনি নিশ্চিতভাবে জানেন এমন কোনও মান কেন ট্র্যাকিং করা হয়নি? আমি বুঝতে পারি না, যদি না এটি হোমওয়ার্কের সমস্যা না হয়। ইভেন্ট পদ্ধতির সাহায্যে আপনি এই মানগুলির প্রতিটি পরিবর্তনকে ট্র্যাক করতে পারেন, তারপরে যে কোনও উদ্দেশ্যে আপনি যদি এই মানগুলি পরিচালনা করতে চান তবে অন্য কোথাও 100 মিমি পোলিং করুন।

— 17:57

1

অযথা

— প্যাটিকেক জুনিয়র

@ প্যাটিকেকেআর শেষ বার যখন দেখলাম এটি 90 কিলোবাইটের নীচে ছিল ছোট সংস্করণে

— ক্রিস

1

@PattycakeJr যদি তুমি সুপার এ সব অসম্ভাব্য এটা ডাউনলোড করে আপনি এটি প্রায় প্রতিটি অন্যান্য সাইট লিঙ্ক থেকে যা CDN নির্দেশ

— ব্রায়ান Leishman

53

onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}

আপনার কনসোলটি খুলুন ( Ctrl+ Shift+ J), উপরের কোডটি অনুলিপি করুন এবং ব্রাউজার উইন্ডোতে আপনার মাউসটি সরান।

— RegarBoy
সূত্র

1

ইমো সেরা উত্তর

— এখানে

10

আমি বিশ্বাস করি যে আমরা এটাকে উড়িয়ে দিচ্ছি,

function mouse_position(e)
{
//do stuff
}

<body onmousemove="mouse_position(event)"></body>

স্নিপেট প্রসারিত করুন

— dGRAMOP
সূত্র

1

আমি এই ফোরামে নতুন, তাই ঠিক তাই আমি জানি, দয়া করে আপনি কেন -1 আমার আনসারটি ব্যাখ্যা করুন - এটি তাই আমি আবার একই ভুল করতে চাই না। ধন্যবাদ! TheProgrammer

— ডিজিআরমপ

10

আমিও কোন ব্যাখ্যা ছাড়াই ডাউনভোটদের দ্বারা বিরক্ত হই। আপনাকে একটি সম্ভাব্য ব্যাখ্যা দেওয়ার জন্য, এই উত্তরটি প্রতি 100 এমএসে ওপির পোলিংয়ের সমস্যার সমাধান করে না। অন্যান্য জবাবগুলির জন্য তাঁর প্রতিক্রিয়াতে এটি পরিষ্কার যে এটি একটি প্রয়োজনীয়তা।

— aaaaaa

1

এছাড়াও এই ধরণের ইনলাইন ইভেন্ট হ্যান্ডলিংটি অবহিত হয়েছে বলে আমি বিশ্বাস করি। document.body.addEventListener("mousemove", function (e) {})HTML এর বিপরীতে আপনার জাভাস্ক্রিপ্ট কোডটিতে এটি করার উপায়

— রায়ান

10

আমার মনে হয় যে উত্তরটি কেন জটিল তা তার চেয়ে বেশি মাত্রায় তিনি কার্সারের এক্স / ওয়াই অবস্থানগুলি জানতে চান।

// 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>

স্নিপেট প্রসারিত করুন

— মর্তুজা
সূত্র

5

ES6 ভিত্তিক কোড:

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

document.addEventListener('mousemove', handleMousemove);

মাউসমুভিংয়ের জন্য যদি আপনার থ্রোটলিংয়ের প্রয়োজন হয় তবে এটি ব্যবহার করুন:

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

এখানে উদাহরণ

— oboshto
সূত্র

2

ব্রাউজার নির্বিশেষে, নীচের লাইনগুলি সঠিক মাউসের অবস্থান আনতে আমার পক্ষে কাজ করেছিল।

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

— সাঁই গণেশ পিত্তলা
সূত্র

2

যদি কেবলমাত্র মাউসটির চলাচলটি চাক্ষুষভাবে ট্র্যাক করতে চান:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
</style>
<body>
<canvas></canvas>

<script type="text/javascript">
var
canvas    = document.querySelector('canvas'),
ctx       = canvas.getContext('2d'),
beginPath = false;

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

document.body.addEventListener('mousemove', function (event) {
	var x = event.clientX, y = event.clientY;

	if (beginPath) {
		ctx.lineTo(x, y);
		ctx.stroke();
	} else {
		ctx.beginPath();
		ctx.moveTo(x, y);
		beginPath = true;
	}
}, false);
</script>
</body>
</html>

স্নিপেট প্রসারিত করুন

— luistar15
সূত্র

2

একটি মন্তব্য উত্তর পোস্ট করার মতো যথেষ্ট খ্যাতি আমার নেই, তবে টিজে ক্রাউডারের দুর্দান্ত উত্তর নিয়েছেন এবং 100 মিমি টাইমারটিতে কোডটি পুরোপুরি সংজ্ঞায়িত করেছেন । (তিনি কল্পনাতে কিছু বিশদ রেখেছিলেন))

প্রশ্নের জন্য ওপি, এবং উত্তরের জন্য টিজে ধন্যবাদ! আপনি উভয়েই দুর্দান্ত সাহায্য কোডটি ইসবিনের একটি আয়না হিসাবে নীচে এম্বেড করা হয়েছে।

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      height: 3000px;
    }
    .dot {
      width: 2px;
      height: 2px;
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
<script>
(function() {
    "use strict";
    var mousePos;

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

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

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
		
        if (!pos) {
            // We haven't seen any movement yet, so don't add a duplicate dot 
        }
        else {
            // Use pos.x and pos.y
            // Add a dot to follow the cursor
            var dot;
            dot = document.createElement('div');
            dot.className = "dot";
            dot.style.left = pos.x + "px";
            dot.style.top = pos.y + "px";
            document.body.appendChild(dot);
        }
    }
})();
</script>
</body>
</html>

স্নিপেট প্রসারিত করুন

— ক্রিস একটি কে
সূত্র

0

এখানে দুটি প্রয়োজনীয়তার সংমিশ্রণ: মাউসের অবস্থানটি প্রতি 100 মিলিসেকেন্ড ট্র্যাক করুন:

var period = 100,
    tracking;

window.addEventListener("mousemove", function(e) {
    if (!tracking) {
        return;
    }

    console.log("mouse location:", e.clientX, e.clientY)
    schedule();
});

schedule();

function schedule() {
    tracking = false;

    setTimeout(function() {
        tracking = true;
    }, period);
}

এই ট্র্যাকগুলি এবং মাউস অবস্থানের উপর কাজ করে, তবে কেবল প্রতিটি পিরিয়ড মিলিসেকেন্ডে।

— ববি জ্যাক
সূত্র

0

@ টিজে ক্রাউডার এবং @ রেগারবয়ের একটি সহজ সংস্করণ উত্তরগুলির ।

আমার মতে কম বেশি।

পরীক্ষা করে দেখুন onmousemove ঘটনা ঘটনা সম্পর্কে আরও তথ্যের জন্য।

সেখানে একটি নতুন মান posXএবং posYপ্রত্যেক সময় অনুভূমিক এবং উল্লম্ব স্থানাঙ্ক অনুযায়ী মাউস প্যাচসমূহ।

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Example Mouse Tracker</title>
      <style>    
        body {height: 3000px;}
        .dot {width: 2px;height: 2px;background-color: black;position: absolute;}
      </style>
    </head>
    <body>
    <p>Mouse tracker</p>
    <script>
    onmousemove = function(e){
        //Logging purposes
        console.log("mouse location:", e.clientX, e.clientY);

        //meat and potatoes of the snippet
        var pos = e;
        var dot;
        dot = document.createElement('div');
        dot.className = "dot";
        dot.style.left = pos.x + "px";
        dot.style.top = pos.y + "px";
        document.body.appendChild(dot);
    }      
    </script>
    </body>
    </html>

— জোনাস
সূত্র