Question

最近我在使用DOM事件处理程序时遇到了问题。接下来我将描述问题相关的东西：

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form >
        <input id="b1" type="submit"  value="Click" />

    </form>

    <script>
       //global variable 
       var v= 0;

       var b1= document.getElementById("b1");

       b1.addEventListener("click", f1, false);

       function f1() {
           window.alert(++v);
       }

    </script>

</body>
</html>

代码应如何运作？

按下按钮（b1）时，全局变量（v）会在每次单击按钮时逐渐增加其值。窗口将提示新值。

问题：

变量不保留其最新值。例如，当我单击按钮两次时，窗口应该警告2但是我仍然得到1.

断言：

全局变量（v）应该在函数内部对它进行更改。这是因为我直接在函数上使用它而不使用参数。

备注：

当我直接在代码上调用该函数两次时它正常工作（而不是处理程序）。

F1（）; // 1

F1（）; // 2
我已经使用Chrome和Firefox对其进行了测试。

那么，这里发生了什么？为什么它不能正常工作？事件处理程序与全局变量的工作方式不同吗？

希望你们能帮助我！谢谢！

Answer 1

您需要添加取消提交的表单onsubmit处理程序。正在重置该值，因为页面已重新加载。

<form onsubmit="return false;">
    <input id="b1" type="submit"  value="Click" />

</form>

那就可以了。

这里是jsfiddle。尝试删除并添加onsubmit处理程序，以便在jsfiddle上更清楚地看到它。

您也可以选择在表单上为onsubmit切换click事件，并在onsubmit事件上使用preventDefault，而不是在HTML中使用onsubmit，至少在现代浏览器中是这样。在IE的旧版本中，您必须以不同的方式执行此操作。

   function f1(event) {
       event.preventDefault();
       window.alert(++v);
   }

Answer 2

此问题是提交按钮正在提交您的表单，最有可能导致页面刷新并将v重置为0.您可以使用事件对象上的preventDefault方法阻止此行为传递给你的回调函数：

//global variable 
var v= 0;

var b1 = document.getElementById("b1");
b1.addEventListener("click", f1, false);

// e is the event object
function f1(e) {
    // calling preventDefault will prevent the form from being submitted
    e.preventDefault();
    console.log("b1 click", ++v)
}

只是一种风格的说明，使用++v会让人感到困惑。您最好使用v += 1;

Answer 3

如前所述，您会看到此行为，因为单击该按钮会提交表单并重新加载页面。

最简单的解决方案是删除<form>元素。

使用事件处理程序时出现全局变量问题（基本Javascript）

3 个答案: