Question

我希望仅在我的按钮打开时激活鼠标悬停功能，而在我的按钮关闭时不激活悬停功能。我可以使悬停工作，但不能启动

function changeBoxColor() {
  let myBox = document.getElementById("myBox");
  if (myBox.style.backgroundColor === "green") {
    myBox.style.backgroundColor = "red";
  } else {
    myBox.style.backgroundColor = "green";
  }
}
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);

function changeToggleButton() {
  let toggleButton = document.getElementById("toggleButton");
  if (toggleButton.value === "ON") {
    toggleButton.value = "OFF";
  } else {
    toggleButton.value = "ON";
  }
}
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);

<input id="toggleButton" type="button" value="ON">
<div style="height: 400px; width: 400px; background-color: red;" id="myBox"></div>

Answer 1

就像上面评论的j08691一样，您只是没有约束EventListeners的加载更改或切换按钮的更改。这是更新的代码，正是这样做的：

function changeToggleButton() {
  let toggleButton = document.getElementById("toggleButton");
  if (toggleButton.value === "ON") {
    toggleButton.value = "OFF";
    document.getElementById("myBox").removeEventListener("mouseover", changeBoxColor);
    document.getElementById("myBox").removeEventListener("mouseleave", changeBoxColor);
  } else {
    toggleButton.value = "ON";
    document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
    document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
  }
}
document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);

现在，此代码假定toggleButton从打开开始，这就是为什么在加载脚本时我们自动addEventListener的原因。另一个变化是，当您检查toggleButton.value时，我们从元素中添加/删除了EventListener。

Answer 2

在按钮值为“ ON”时简单地添加事件，否则删除事件

function changeBoxColor() {
  let myBox = document.getElementById("myBox");
  if (myBox.style.backgroundColor === "green") {
    myBox.style.backgroundColor = "red";
  } else {
    myBox.style.backgroundColor = "green";
  }
}

   document.getElementById("myBox").addEventListener("mouseover", changeBoxColor);
document.getElementById("myBox").addEventListener("mouseleave", changeBoxColor);

var eventOver = ["mouseover",changeBoxColor];
var eventLeave = ["mouseleave",changeBoxColor];


function changeToggleButton() {
  let toggleButton = document.getElementById("toggleButton");
  if (toggleButton.value === "ON") {
    toggleButton.value = "OFF";
     document.getElementById("myBox").removeEventListener(...eventOver);
document.getElementById("myBox").removeEventListener(...eventLeave);
    
  } else {
    toggleButton.value = "ON";
   document.getElementById("myBox").addEventListener(...eventOver);
document.getElementById("myBox").addEventListener(...eventLeave);
  }
}
document.getElementById("toggleButton").addEventListener("click", changeToggleButton);

<input id="toggleButton" type="button" value="ON">
<div style="height: 400px; width: 400px; background-color: red;" id="myBox"></div>

Answer 3

FWIW，如果您接受“切换按钮”可以是一个复选框（只能是一个切换按钮），则只能使用HTML和CSS来完成。

然后，您可以使用属性选择器找到该复选框，或仅使用其类或ID选择它。然后，使用+ div和+ div:hover，可以在div之后设置样式。

诀窍在于选择器：

input[type=checkbox]:checked + div:hover

基本上是说，定位一个悬停的div，即在选中类型为checkbox的输入之后。

input[type=checkbox] + div {
  height: 400px; 
  width: 400px; 
  background-color: red;
}

input[type=checkbox]:checked + div:hover {
  background-color:green;
}

<input id="toggleButton" type="checkbox" value="">
<div id="myBox"></div>

当然，您可以设置复选框的样式以使其看起来更像您想要的按钮，或者完全隐藏它并使用<label for="toggleButton"></label>，它可以在视觉上代替该复选框，并且可以根据您的喜好进行设置。

或者，您甚至可以使用普通按钮，而只需在单击时更改按钮的类别。然后，您仍然可以使用CSS设置div的样式。

这可以使用<input完成，但是您必须通过JavaScript设置值。举例来说，我使用了<button，它具有内容而不是值，因此，如果需要，您也可以使用CSS切换标题。

(function(element) {
  element.addEventListener('click', function() {
    if (element.classList.contains('on'))
      element.classList.remove('on');
    else
      element.classList.add('on');  
  });
})(document.getElementById('toggleButton'));

button + div {
  height: 400px; 
  width: 400px; 
  background-color: red;
}

button.on + div:hover {
  background-color:green;
}

/* If you like, you can even set the button text in CSS, but
  beware of accessibility issues. */
button:after {
  content: "off";
}
button.on:after {
  content: "on";
}

<button id="toggleButton" type="button"></button>
<div id="myBox"></div>

开/关按钮激活功能

3 个答案: