जावास्क्रिप्ट - ट्रैक माउस स्थिति

161

मैं माउस कर्सर की स्थिति को ट्रैक करने की उम्मीद कर रहा हूं, समय-समय पर हर टी mseconds। इसलिए अनिवार्य रूप से, जब कोई पृष्ठ लोड होता है - यह ट्रैकर को शुरू करना चाहिए और (कहना) प्रत्येक 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।

— फेलिक्स क्लिंग

हां, लेकिन mouse_position () फ़ंक्शन को हर 100 मिलीसेकंड पर स्वयं को कॉल नहीं करना चाहिए। यह वास्तव में एक अनंत पुनरावर्ती कार्य की तरह व्यवहार नहीं करना चाहिए?

— हरि

2

जावास्क्रिप्ट में कैप्चर माउस पोजीशन के

— शैडो विजार्ड इयर फॉर यू

@Titan: हाँ, लेकिन मुझे संदेह है कि यह त्रुटि window.eventहोगी क्योंकि undefinedया होगा null। अगर कोई घटना नहीं है, कोई eventवस्तु नहीं है।

— फेलिक्स क्लिंग

1

ब्याज से बाहर, इस के आवेदन क्या है?

— SuperUberDuper

178

घटना के eventलिए एक हैंडलर द्वारा प्राप्त वस्तु पर माउस की स्थिति की सूचना दी जाती है mousemove, जिसे आप खिड़की (घटना बुलबुले) से जोड़ सकते हैं:

(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केवल पुराने IE पर चलेगा।)

उपरोक्त कार्रवाई का उदाहरण - यह पृष्ठ पर आपके माउस को खींचते समय डॉट्स को खींचता है। (IE8, IE11, Firefox 30, Chrome 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
        }
    }
})();

जहाँ तक मुझे जानकारी है, आप बिना किसी घटना को देखे माउस स्थिति प्राप्त नहीं कर सकते, कुछ ऐसा जो एक और स्टैक ओवरफ्लो प्रश्न का उत्तर देता है ।

साइड नोट : यदि आप प्रत्येक 100ms (10 गुना / सेकंड) में कुछ करने जा रहे हैं, तो उस फ़ंक्शन में आपके द्वारा किए जाने वाले वास्तविक प्रसंस्करण को बहुत सीमित रखने का प्रयास करें । यह ब्राउज़र के लिए बहुत काम है, विशेष रूप से पुराने Microsoft वाले। हां, आधुनिक कंप्यूटरों पर ऐसा नहीं लगता है, लेकिन ब्राउज़रों में बहुत कुछ चल रहा है ... इसलिए उदाहरण के लिए, आप अपने द्वारा संसाधित किए गए अंतिम स्थान पर नज़र रख सकते हैं और यदि स्थिति नहीं है तो तुरंत हैंडलर से जमानत लें। ' t बदल गया।

— टीजे क्राउडर
स्रोत

66

यहाँ एक समाधान है, जो jQuery और एक माउस ईवेंट श्रोता (जो नियमित मतदान से कहीं बेहतर है) पर आधारित है:

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

— solendil
स्रोत

जैसा कि मैंने उल्लेख किया था, नियमित मतदान वही है जो मैं करना चाहता हूं। मैं माउस घटनाओं में परिवर्तन पर नज़र नहीं रख रहा हूँ, मैं केवल हर x मिलीसेकंड पर माउस स्थिति को पकड़ने के लिए देख रहा हूँ (चाहे माउस चले या नहीं)।

— हरि

3

क्यों एक मूल्य पर नज़र रखना जो आप जानते हैं कि निश्चित रूप से नहीं बदला है? मुझे समझ में नहीं आता, जब तक कि यह एक होमवर्क समस्या नहीं है। ईवेंट विधि के साथ, आप इन मानों के प्रत्येक परिवर्तन को ट्रैक कर सकते हैं, फिर यदि आप किसी भी उद्देश्य से इन मूल्यों को संभालने की आवश्यकता है, तो कहीं और 100ms मतदान करें।

— सॉलेंडिल

1

अनावश्यक रूप से

— 5mb

@PattycakeJr पिछली बार जब मैंने देखा था कि यह न्यूनतम संस्करण में 90kB था

— Kris

1

@PattycakeJr भी अगर आप सुपर होने की संभावना नहीं है, तो आप इसे डाउनलोड कर सकते हैं अगर आप सीडीएन की ओर इशारा करते हैं, क्योंकि लगभग हर दूसरी साइट से लिंक है

— ब्रायन लीशमैन

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

— dGRAMOP

10

मैं भी बिना किसी स्पष्टीकरण के परेशान हो जाता हूं। आपको एक संभावित स्पष्टीकरण देने के लिए, यह उत्तर ओपी की समस्या को हर 100 एमएस पर निर्भर नहीं करता है। यह अन्य उत्तरों के प्रति उनकी प्रतिक्रिया में स्पष्ट है कि यह एक आवश्यकता है।

— आगा

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

टिप्पणी उत्तर पोस्ट करने के लिए मेरे पास पर्याप्त प्रतिष्ठा नहीं है, लेकिन टीजे क्राउडर के उत्कृष्ट उत्तर को ले लिया और 100ms टाइमर पर कोड को पूरी तरह से परिभाषित किया । (उन्होंने कुछ विवरण कल्पना पर छोड़ दिए।)

सवाल के लिए धन्यवाद ओपी, और जवाब के लिए टीजे! तुम दोनों एक बड़ी मदद हो। कोड को आइबिन के दर्पण के रूप में नीचे एम्बेड किया गया है।

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

स्निपेट का विस्तार करें

— K के साथ क्रिश
स्रोत

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

@TJ Crowder और @RegarBoy के उत्तर का एक सरलीकृत संस्करण ।

मेरी राय में कम ज्यादा है।

घटना के बारे में अधिक जानकारी के लिए ऑनमोसोव घटना देखें ।

वहाँ की एक नई मूल्य है 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>

— जोनास
स्रोत