re2.addEventListener("mouseover", function(){
const re21 = document.getElementById("reso");
re21.style.position = "absolute";
re21.style.top = "50%";
re21.style.left = "50%";
console.log("Exiting Listener- mouseOver");
re3.addEventListener("mouseover", function(){
const re22 = document.getElementById("reso");
re22.style.position = "fixed";
re22.style.top ="0px";
re22.style.left="0px";
console.log("Exiting Listener- mouseout");
});
});
Ich habe ein HTML-Div-Element mit der ID „reso“. Ich möchte das Element immer dann von Punkt A nach Punkt B verschieben, wenn die Maus es erreicht. Wie können wir das machen?
Wenn wir den obigen Javascript-Code ausführen. Es bewegt sich nur einmal. Anschließend haben wir versucht, den obigen Code zusammen mit einigen Konsolenprotokollen zu verpacken, indem wir eine Schleife von i=0 bis 10 verwendeten. Alle Protokolle werden gedruckt. Der Ereignis-Listener wird jedoch immer noch nur einmal ausgeführt.
Können Sie uns dabei helfen?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可能需要在事件回调函数之外的外部范围内初始化一个计数器，然后在每次触发事件时递增它。
const elm = document.getElementById("reso"); let initialTopPosition = 0; let initialLeftPosition = 0; function moveElement() { initialTopPosition++; initialLeftPosition++; elm.style.top = `${initialTopPosition}%`; elm.style.left = `${initialLeftPosition}%`; console.log("Exiting Listener- mouseOver"); }; elm.addEventListener("mousemove", moveElement);#reso { background-color: red; height: 100px; width: 100px; display: inline-block; position: absolute; }您可以使用 mousemove 事件代替 mouseover 事件。这将允许您随着鼠标移动不断更新元素的位置
const re21 = document.getElementById("reso"); let isMoving = false; re21.addEventListener("mousemove", function(event) { if (!isMoving) { isMoving = true; re21.style.position = "absolute"; re21.style.top = `${event.clientY}px`; re21.style.left = `${event.clientX}px`; } }); re21.addEventListener("mouseout", function() { isMoving = false; });