如何正確使用addEventListener？

Question

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");
    
          });

      });

我有一個 id 為「reso」的 html div 元素。 我想要做的是每當滑鼠到達該元素時將該元素從 A 點移動到 B 點。我們怎樣才能做到這一點？

當我們執行上面的javascript程式碼時。它只移動一圈。然後我們嘗試使用 i=0 到 10 的循環將上面的程式碼與一些控制台日誌一起包含在其中。所有日誌都在列印。 但事件監聽器仍然只執行一次。

你能幫助我們如何做到這一點嗎？

Answer 1

您可能需要在事件回調函數之外的外部範圍內初始化一個計數器，然後在每次觸發事件時遞增它。

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;
}

Answer 2

您可以使用 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;
});