Ik hoop de positie van de muiscursor te volgen, periodiek elke T-mseconden. Dus in wezen, wanneer een pagina laadt – deze tracker moet beginnen en voor (zeg) om de 100 ms, moet ik de nieuwe waarde van Posx en Posy krijgen en in het formulier afdrukken.
Ik heb de volgende code geprobeerd – maar de waarden worden niet vernieuwd – alleen de initiële waarden van POSX en Posy-show-up in de formulieren. Ideeën over hoe ik dit kan opleveren?
<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>
1, Autoriteit 100%
De positie van de muis wordt gerapporteerd op de eventObject ontvangen door een handler voor de mousemoveEvenement, die u aan het venster kunt bevestigen (de gebeurtenisbellen):
(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
}
})();
(Merk op dat de behuizing van die ifalleen op Old IE zal uitvoeren.)
Voorbeeld van het bovenstaande in actie – het trekt stippen terwijl u uw muis over de pagina sleept. (Getest op IE8, IE11, Firefox 30, Chrome 38.)
Als u echt een op de timer gebaseerde oplossing nodig heeft, combineert u dit met een aantal staatsvariabelen:
(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
}
}
})();
Voor zover ik weet, kun je de muispositie niet krijgen zonder een gebeurtenis te hebben gezien, iets dat dit antwoord op een andere Stack Overflow-vraaglijkt te bevestigen.
Kanttekening: als je elke 100 ms (10 keer/seconde) iets gaat doen, probeer dan de feitelijke verwerking die je in die functie doet zeer, zeer beperktte houden. em>. Dat is veel werk voor de browser, vooral voor oudere Microsoft-versies. Ja, op moderne computers lijkt het niet veel, maar er gebeurt veel in browsers… U kunt bijvoorbeeld de laatste positie die u hebt verwerkt bijhouden en de handler onmiddellijk verlaten als de positie heeft ‘ niet veranderd.
Antwoord 2, autoriteit 34%
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
Open je console (Ctrl+Shift+J), kopieer en plak de bovenstaande code en beweeg je muis in het browservenster.
Antwoord 3, autoriteit 32%
Hier is een oplossing, gebaseerd op jQuery en een muisgebeurtenislistener (wat veel beter is dan een gewone polling) op de body:
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
Antwoord 4, autoriteit 6%
Ik denk dat we hier te veel over nadenken,
function mouse_position(e)
{
//do stuff
}<body onmousemove="mouse_position(event)"></body>Antwoord 5, autoriteit 5%
Ik denk dat hij alleen de X/Y-posities van de cursor wil weten dan waarom het antwoord zo ingewikkeld is.
// 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>Antwoord 6, autoriteit 3%
Op ES6 gebaseerde code:
let handleMousemove = (event) => {
console.log(`mouse position: ${event.x}:${event.y}`);
};
document.addEventListener('mousemove', handleMousemove);
Als je beperking nodig hebt voor muisbewegingen, gebruik dan dit:
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));
hier is voorbeeld
Antwoord 7, autoriteit 2%
Als u de muisbeweging alleen visueel wilt volgen:
<!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>Antwoord 8, autoriteit 2%
Gewoon een vereenvoudigde versie van @T.J. Crowderen @RegarBoy‘s antwoorden.
Minder is meer naar mijn mening.
Bekijk onmousemove-evenementvoor meer informatie over het evenement.
Er is een nieuwe waarde van posXen posYelke keer dat de muis beweegt volgens de horizontale en verticale coördinaten.
<!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>
Antwoord 9
Onafhankelijk van de browser werkten de onderstaande regels voor mij om de juiste muispositie op te halen.
event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top
10
Hier is een combinatie van de twee vereisten: volg de positie van de muis, elke 100 milliseconden:
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);
}
Dit volgt & werkt op de muispositie, maar alleen elke periodemilliseconden.
Antwoord 11
Dit is de eenvoudigste manier om uw muispositie te volgen
HTML
<body id="mouse-position" ></body>
js
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
Antwoord 12
We moesten onlangs de huidige x,y-positie vinden om elementen op te sommen waarover de cursor zweeft, onafhankelijk van de z-index. We hebben uiteindelijk gewoon een mousemove-gebeurtenislistener aan het document toegevoegd, bijvoorbeeld
function findElements(e) {
var els = document.elementsFromPoint(e.clientX, e.clientY);
// do cool stuff with els
console.log(els);
return;
}
document.addEventListener("mousemove", findElements);Antwoord 13
Dit is de kortste manier om de coördinaten van de muisaanwijzer te krijgen.
Plaats gewoon je element waar de cursor gaat zweven, binnen $(“”)
$("***enter you element here***").mousemove(function(event)
{
console.clear()
var x = event.originalEvent.screenX;
var y = event.originalEvent.screenY;
console.log("x : "+x)
console.log("y : "+y)
})
14
Hier is een oplossing
document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}
15
document.addEventListener('mousemove', (event) => {
document.getElementById("line").style.top = event.clientY+'px';
document.getElementById("lineY").style.left = event.clientX+'px';
document.getElementById("pos").style.top = (event.clientY -50)+'px';
document.getElementById("pos").style.left = (event.clientX-50)+'px';
}); <style>
body {
position: relative;
height: auto;
min-height: 100% !important;
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.abs{
position:relative;
}
.lineY
{
display: flex;
position:relative;
left:0px;
background-color:black;
width:2px;
height: 100vh;
min-height:100%
}
.line
{
display: flex;
position:relative;
background-color:black;
min-height:2px;
width:100%;
}
.circle
{
display: flex;
position:absolute;
left:0px;
top:0px;
}
</style><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='line' id="line"></div>
<div class='lineY' id="lineY"></div>
<svg height="100" width="100" id="pos" class="circle" >
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>
</body>
</html>