JavaScript 通过 addEventListener 悬停 [重复]答案

【问题标题】：JavaScript hover via addEventListener [duplicate]JavaScript 通过 addEventListener 悬停 [重复]
【发布时间】：2022-12-05 06:22:17
【问题描述】：

我有一个框 (#fB) 和一个复选框 (#chck)。我试图根据选中或未选中的复选框将鼠标悬停在该框上。

我写了条件 IF，但此悬停也被触发为 FALSE。我试过 put .pointerEvents = "none";作为 FALSE，但什么也没有发生。

任何建议问题在哪里？

非常感谢。


document.querySelector("#chck").addEventListener("click", changer);

    var check = document.querySelector("#chck");
    var box = document.querySelector("#fB");
function changer(){
    if(check.checked){
        box.addEventListener("mouseover", function(){
            box.style.background = "green";
        });
        box.addEventListener("mouseout", function(){
            box.style.background = "purple";
        });
        
    }else{        
        box.removeEventListener("mouseover", function(){
            box.style.background = "green";
        });
        box.removeEventListener("mouseout", function(){
            box.style.background = "purple";
        });        
    }    
};

【问题讨论】：

您正在尝试删除与您添加的事件侦听器不同的事件侦听器。

标签： javascript

【解决方案1】：

当未选中复选框时，您的代码似乎正在从 box 元素中删除事件侦听器。但是，您将匿名函数传递给 removeEventListener 方法，这将不起作用，因为这些函数与作为事件侦听器添加的函数不同。

要解决此问题，您可以将对事件侦听器函数的引用存储在变量中，然后将这些变量传递给 removeEventListener 方法。这是您如何执行此操作的示例：

document.querySelector("#chck").addEventListener("click", changer);

var check = document.querySelector("#chck");
var box = document.querySelector("#fB");

// Event listener functions
var mouseOver = function() {
  box.style.background = "green";
};

var mouseOut = function() {
  box.style.background = "purple";
};

function changer() {
  if (check.checked) {
    // Add the event listeners
    box.addEventListener("mouseover", mouseOver);
    box.addEventListener("mouseout", mouseOut);
  } else {
    // Remove the event listeners
    box.removeEventListener("mouseover", mouseOver);
    box.removeEventListener("mouseout", mouseOut);
  }
}

【讨论】：