반응형
Javascript - 마우스 위치 추적
마우스 커서의 위치를 t밀리초마다 주기적으로 추적하고 싶습니다.따라서 기본적으로 페이지가 로드될 때 - 이 트래커가 시작되고 (예를 들어) 100밀리초마다 posX와 posY의 새로운 값을 가져와 폼으로 출력해야 합니다.
다음 코드를 시도했지만 값이 새로 고쳐지지 않습니다.폼박스에 표시되는 것은 posX와 posY의 초기값뿐입니다.어떻게 하면 이 작업을 시작할 수 있을까요?
<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>
마우스의 위치는event핸들러가 수신한 오브젝트mousemoveevent: 창(이벤트 버블)에 부착할 수 있습니다.
(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
}
}
})();
제가 아는 바로는, 다른 스택 오버플로우 질문에 대한 이 답변으로 확인할 수 있는 이벤트가 없으면 마우스 위치를 얻을 수 없습니다.
사이드 노트:100밀리초(10회/초)마다 작업을 수행할 경우 해당 기능에서 수행하는 실제 처리를 매우 제한적으로 유지하십시오.브라우저, 특히 오래된 Microsoft 브라우저는 많은 작업을 필요로 합니다.네, 현대 컴퓨터에서는 그렇게 보이지 않지만 브라우저에서는 많은 일들이 일어나고 있습니다.예를 들어 마지막으로 처리한 위치를 추적하고 위치가 변경되지 않은 경우 즉시 핸들러에서 벗어날 수 있습니다.
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
콘솔(+)CtrlShiftJ을 열고 위의 코드를 복사하여 붙여넣은 후 브라우저 창에서 마우스를 이동합니다.
다음은 본문에 대한 jQuery와 마우스 이벤트 청취자(일반 폴링보다 훨씬 우수함)를 기반으로 한 해결책입니다.
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
우리가 이걸 너무 많이 생각하고 있는 것 같아
function mouse_position(e)
{
//do stuff
}<body onmousemove="mouse_position(event)"></body>그가 왜 대답하는지보다 커서의 X/Y 위치만 알고 싶어한다고 생각하는 것은 그렇게 복잡합니다.
// 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>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));
여기 예가 있다
@T.J. Crowder와 @RegarBoy의 답변을 단순화한 것입니다.
내 생각에는 적다는 게 더 나은 것 같아.
이벤트에 대한 자세한 내용은 onmouse move 이벤트를 확인하십시오.
의 새로운 가치가 있습니다.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>
마우스 움직임을 시각적으로 추적하는 경우:
<!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>그때도 답을 찾고 있는 사람이 있다면
function track(e) {
console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);
이 코드를 콘솔에 붙여넣어 즉시 작업 확인
document.addEventListener('mousemove', (event) => {
document.getElementById("line").style.top = event.clientY - 10 + 'px';
document.getElementById("lineY").style.left = event.clientX - 10 + 'px';
document.getElementById("pos").style.top = (event.clientY - 60) + 'px';
document.getElementById("pos").style.left = (event.clientX - 60) + 'px';
});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;
}<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>브라우저에 관계없이 아래 행은 마우스 위치를 올바르게 가져오기 위해 작동했습니다.
event.clientX - event.currentTarget.getBoundingClientRect().left event.clientY - event.currentTarget.getBoundingClientRect().top
코멘트를 투고할 정도의 평판은 없지만, TJ Crowder의 훌륭한 답변을 받아 100ms 타이머로 코드를 완전히 정의했습니다.(그는 상상에 몇 가지 세부사항을 남겼다.)
질문해 주신 OP님, 답변해 주신 TJ님 감사합니다!두 분 다 큰 도움이 됩니다.코드는 isbin의 미러로서 아래에 포함되어 있습니다.
<!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>여기 해결책이 있습니다.
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;
}
[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
console.table({
"mouse x": event.clientX,
"mouse y": event.clientY
});
}));
다음은 두 가지 요구 사항의 조합입니다. 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);
}
이 기능은 마우스 위치를 추적하고 작동하지만 매 밀리초마다만 작동합니다.
다음은 마우스 위치를 추적하는 가장 간단한 방법입니다.
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);
}, );
우리는 최근 커서가 z-index와 독립적으로 맴돌고 있는 요소를 열거하기 위해 현재 x,y 위치를 찾아야 했다.결국 마우스 이동 이벤트 청취자를 문서에 첨부하게 되었습니다.
function findElements(e) {
var els = document.elementsFromPoint(e.clientX, e.clientY);
// do cool stuff with els
console.log(els);
return;
}
document.addEventListener("mousemove", findElements);이것이 마우스 포인터의 좌표를 얻는 가장 빠른 방법입니다.$("") 안에 커서를 놓기만 하면 됩니다.
$("***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)
})
언급URL : https://stackoverflow.com/questions/7790725/javascript-track-mouse-position
반응형
'source' 카테고리의 다른 글
| Twitter의 Bootstrap 버튼을 비활성화하는 가장 좋은 방법 (0) | 2023.01.28 |
|---|---|
| 문자열 필드에서 MySQL 날짜 변환 (0) | 2023.01.28 |
| gradle.properties와 settings.gradle을 사용하는 경우 (0) | 2023.01.28 |
| vuex 상태를 html 입력 요소에 바인딩하지 않았는데도 구성 요소 수준 상태를 변경하면 vuex 상태가 변경되는 이유는 무엇입니까? (0) | 2023.01.19 |
| disk mysql의 tmp 테이블로 복사 건너뛰기 (0) | 2023.01.19 |