MrAnderson1999
@MrAnderson1999
Секси

Как добавить цикл события с обновлением коррдинаты из другой функции?

Почему при смене положения мышки, показываются изначальные координаты, если запущена функция, которая отслеживает новое событие?
Как сделать так, чтобы каждое срабатывание fn показывало текущие координаты?
https://jsfiddle.net/cfe0ntmy/
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 2
@HikariNoSekai
Middle Vue.js Developer
вынеси для начала
window.addEventListener("mouseup", () => {
    	clearInterval(fn);
    })
из первого EventListener

https://jsfiddle.net/HikariNoSekai/j7r3nwkm/2/ такого плана имели ввиду?
Ответ написан
Комментировать
@fixeri
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
		  width:100%;
		  height:600px;
		  background-color:#f1f1f1;
		}
		.box {
		  width:400px;
		  height:400px;
		  background-color:coral;
		}
		.mini {
		  width:100px;
		  height:100px;
		  background-color:green;
		}
	</style>
</head>
<body>
	<div class="box">
	    <div class="mini">
	    
	    </div>
	</div>

	<script type="text/javascript">
		"use strict";

		let fn = null;
		let coordsY, coordsX;
		window.addEventListener("mousemove", (e) => {
			coordsX = e.clientX;
			coordsY = e.clientY;
		});

		document.querySelector(".box").addEventListener("mousedown", function(e) {
			let el = e.target;
		    console.log(e.clientY);
		    
		    fn = setInterval(function() {
				elPos(e);
			}, 1000);
		    
		    window.addEventListener("mouseup", () => {
		    	clearInterval(fn);
		    });
		});

		function elPos(e) {
			console.log(e.target);
			console.log(coordsX);
			console.log(coordsY);
		}
	</script>
</body>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы