Как получить координаты мышки в javascript без jQuery?

285
13 июля 2018, 17:40

Скиньте пожалуйста самый простой пример с двумя input, в которых будут обновляться координаты мышки по горизонтали и вертикали. Без jQuery , спасибо )

Answer 1

Используя mouse event. Простейший пример ниже.

var X = document.getElementById('X'); 
var Y = document.getElementById('Y'); 
 
function pos(e){ 
  X.value = e.pageX; 
  Y.value = e.pageY; 
} 
 
addEventListener('mousemove', pos, false);
<!DOCTYPE html> 
<html> 
<body> 
<input type="text" id="X"> 
<input type="text" id="Y"> 
</body> 
</html>

Answer 2

MDN: https://developer.mozilla.org/ru/docs/Web/API/MouseEvent

<!DOCTYPE html> 
<html>
<head>
<title>Пример для clientX\clientY</title>
<script>
function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n" +
    "clientY value: " + evt.clientY + "\n"
  );
}
</script>
</head>
<body onmousedown="showCoords(event)">
<p>Для показа координат мышки нажмите в любом месте страницы.</p>
</body>
</html>

Вместо alert поставьте value Ваших 2 input

Answer 3

Можно и так

var IE = document.all ? true : false; 
if (!IE) document.captureEvents(Event.MOUSEMOVE) 
document.onmousemove = getMouseXY; 
var tempX = 0; 
var tempY = 0; 
 
function getMouseXY(e) { 
  if (IE) { // grab the x-y pos.s if browser is IE 
    tempX = event.clientX + document.body.scrollLeft; 
    tempY = event.clientY + document.body.scrollTop; 
  } else { // grab the x-y pos.s if browser is NS 
    tempX = e.pageX; 
    tempY = e.pageY; 
  } 
  if (tempX < 0) { 
    tempX = 0; 
  } 
  if (tempY < 0) { 
    tempY = 0; 
  } 
  document.Show.MouseX.value = tempX; 
  document.Show.MouseY.value = tempY; 
  return true; 
}
<form name="Show"> 
  X <input type="text" name="MouseX" value="0" size="4"><br> Y <input type="text" name="MouseY" value="0" size="4"><br> 
</form>

Answer 4

Сделал для вас пример с двумя инпутами, в которых обновляются координаты.

let handleMousemove = (event) => { 
  //console.warn(`${event.x}:${event.y}`); 
  document.getElementById("x").value = `\n${event.x}`; 
  document.getElementById("y").value = `\n${event.y}`; 
}; 
 
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); 
    } 
  } 
}; 
 
document.addEventListener('mousemove', throttle(handleMousemove, 500));
move mouse here 
<input type="text" id="x"> 
<input type="text" id="y">

 https://jsfiddle.net/178nz54o/
READ ALSO
Ошибки обращения к методам прототипа
javascript

Ошибки обращения к методам прототипа

Есть такой код:

 280
Проблема с heroku
javascript

Проблема с heroku

Пытаюсь выставить приложение на сервер heroku,но не получается,делаю всё как по инструкции

 304
Скачивание файлов с напрямую API
javascript

Скачивание файлов с напрямую API

Есть сайт и API, написанные на ASPNET Core

 251
Как проверить если ли контент в блоке
javascript

Как проверить если ли контент в блоке

Вот код!

 343