Question

onclick中创建的警告对话框每次在无限循环中解除时都会重新出现。这种情况发生在Chrome和Firefox中。这是我第一天学习Javascript，所以请保持温和。

有没有办法让警报对话框只出现一次？

这可能是我的电脑出了问题。如果是这样，我该怎么做才能解决这个问题？

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<p>"The text should turn red and one alert dialog should appear on click."</p>

<script>
function changeFontRed() {
    var x = document.getElementById("demo");
    x.style.color = "red";
    console.log("Hello World!");
    window.alert("Hello World!");
    x.removeEventListener("onclick", changeFontRed(), false);
    x.addEventListener("onclick", changeFontBlue());
}

function changeFontBlue() {
    var x = document.getElementById("demo");           
    x.style.color = "blue";
    x.removeEventListener("onclick", changeFontBlue(), false);
    x.addEventListener("onclick", changeFontRed());
}
</script>

<button type="button" onclick="changeFontRed()">Click Me!</button>

</body>
</html>

谢谢你们。

Answer 1

这些行：

x.removeEventListener("onclick", changeFontRed(), false);
x.addEventListener("onclick", changeFontBlue());

您调用函数 changeFontRed和changeFontBlue，而非仅命名。括号()标记一个调用，当再次调用该函数时，对话框重新出现。

另外（感谢评论者）该活动名为＆＃34;点击＆＃34;。试试这个：

x.removeEventListener("click", changeFontRed, false);
x.addEventListener("click", changeFontBlue);

Answer 2

removeEventListener和addEventListener的第二个参数应该是一个函数。您没有通过该功能，您已经调用该功能，因为您之后有()。拿出来。

function changeFontBlue() {
    var x = document.getElementById("demo");           
    x.style.color = "blue";
    x.removeEventListener("click", changeFontBlue, false);
    x.addEventListener("click", changeFontRed);
}

此外，该活动的名称仅为click，而非onclick。

Answer 3

您的代码存在一些问题，但无限循环问题位于以下行中：

x.removeEventListener("onclick", changeFontRed(), false);

更具体地说，该部分：changeFontRed()。虽然您尝试从元素中删除changeFontRed事件侦听器，但您真正要做的是调用该函数并将返回值传递给removeEventListener函数。只要你已经进入changeFontRead函数，它就会递归调用它，直到它变成堆栈溢出。

removeEventListener函数需要第二个参数作为函数引用，只有在单击按钮时才会调用它。因此，要解决您的问题，您必须删除()，然后传递函数本身。例如：removeEventListener('click', changeFontRed)。

但是您的代码中还存在其他问题，例如"onclick"您作为第一个参数传递，因为addEventListener方法无法理解它，因为您不应该＆＃39; t "on[event name]"，但仅"[event name]"。所以，它应该只是"click"。

Answer 4

remove / addEventListener的第二个参数应该是一个函数，而不是调用函数的结果（已经回答）。
remove / addEventListener的第一个参数应该是'click'而不是'onclick'。
按钮单击将仅在第一次工作，之后，您单击更改颜色的文本以再次更改颜色。

如何阻止Javascript警报重新出现在无限循环中

4 个答案: