临时JavaScript onclick切换_Javascript_Function_Button_Onclick_Toggle

临时JavaScript onclick切换

javascript function button

临时JavaScript onclick切换,javascript,function,button,onclick,toggle,Javascript,Function,Button,Onclick,Toggle,我花了很长时间才弄明白这一点。我有一张表格 <form id="form1" .. target="right" action="blablah"> <input .. /> <input type="submit" id="ycsubmit" onclick="..." value="Go!" /> </FORM> 然后我将onclick设置为trigger timer（）；按原样，这会设置timer（），它会设置ycClick（），然后将o

我花了很长时间才弄明白这一点。我有一张表格

<form id="form1" .. target="right" action="blablah">
<input .. />
<input type="submit" id="ycsubmit" onclick="..." value="Go!" />
</FORM>

然后我将onclick设置为trigger timer（）；按原样，这会设置timer（），它会设置ycClick（），然后将onclick切换为null，但在30秒后不会将其切换回原位。我怀疑这与这一行有关：

isEnabled = !isEnabled;

但是删除没有什么区别，它的操作仍然完全相同。

有很多方法可以改进代码；其中一些是简单的错误，另一些则表示您应该了解DOM和JavaScript运行时的一些其他特性。以下是我注意到的，顺序如下：

错误

在测试
```
if（isEnabled=true）时，您犯了一个常见错误{
```
。单个
```
=
```
是一个赋值，因此您的代码不是在测试isEnabled是否为true。而是在测试赋值的结果，该结果始终为
```
true
```
。使用三重等于
```
==
```
来测试
```
isEnabled
```
当前是否为true。（您还将看到一个双等于
```
==
```
，但此运算符可能会产生意外的效果，并且要求不太严格，因此请尽量避免使用它。）
在
```
document.getElementById（“ycsubmit”）.onclick=timer（）行上；
```
，您应该在
```
timer
```
之后去掉括号。使用括号，您执行
```
timer
```
函数，而不是为该函数分配引用。onclick方法设置为
```
timer
```
的返回值，因为您没有指定
```
return
```
statement，将是
```
未定义的
```
您从未将
```
isEnabled
```
设置为false！在当前设置中，您应该保留
```
isEnabled=！isEnabled
```
行

解决问题

我上面的答案演示了一种禁用表单提交的更好方法。您不应该尝试设置和取消设置onclick处理程序；相反，您应该处理处理程序本身内部的重复单击。事实上，这可能更简单：如果此表单正常提交，而不是通过JavaScript验证或通过AJAX发送，那么只需禁用输入，无需担心重新启用，因为服务器完成表单提交处理后，表单将刷新或导航离开。页面将消失或使用启用的提交按钮重新加载
您不应使用“提交”按钮上的单击事件来阻止表单提交。表单有一个用于此目的的提交事件。在某些浏览器中，可以通过返回键提交表单，这将绕过您的单击事件。您应该订阅表单的提交事件
你不应该使用“onclick”属性来首先分配事件处理程序。您应该将事件侦听器添加到DOM元素中。这将导致更灵活的事件（例如，您可以将多个事件分配给同一元素）以及更好地处理事件执行的范围。最后，它将文档的表示和行为与它的内容。这是jQuery和其他流行库的做法。我知道这需要更多的编码，但这就是为什么存在像jQuery这样的操纵库。你应该试一试

function ycClick () {
    var timestamp = +( new Date );
    if ( ycClick.timestamp && timestamp - ycClick.timestamp < 30000 ) return;
    ycClick.timestamp = timestamp;

    // the actual code of the function
}

函数单击（）{
var时间戳=+（新日期）；
if（ycClick.timestamp&×tamp-ycClick.timestamp<30000）返回；
ycClick.timestamp=时间戳；
//函数的实际代码
}

现场演示：

isEnabled=true

期间分配一个值e> ==是要使用的比较运算符。另外，要分配不应放入的函数，

（）

否则，您分配的是函数调用的结果，而不是函数。该死的漂亮！！这是我最初的想法，但我确信设置超时会更容易…现在看看我是否可以将其应用于我的情况！谢谢！见鬼！它仍然不起作用..我复制/粘贴了您的确切代码！！我有一个新的日期规范我以前也在这页上看到过，但没有解释为什么我刚才链接的过于简化的版本不能使用。请问我做错了什么？@Gordie（1）你有一个语法错误-第4行有一个多余的

大括号，（2）你写了

onclick=“timer（）；”

，但是函数名是

yclick

。我已经纠正了这两件事：（为了演示的目的，我还将按钮从“提交”改为“按钮”）哦，伙计，谢谢你和我粘在一起，西蒙。下次你来佛罗里达时，你得让我给你买杯啤酒。干杯！这里有一个更好的解释我在做什么。页面从不刷新。yclick是一个计数器，表单只用于显示它，每次提交表单时添加+1。它还有另一个用途，而且它确实必须打开“提交”按钮不能只是一个常规按钮。请查看我在这里实现的“Šime Vidas”示例，并告诉我我继续做错了什么。同时，我将使用您的一些指针再次尝试我的方法。

function ycClick () {
    var timestamp = +( new Date );
    if ( ycClick.timestamp && timestamp - ycClick.timestamp < 30000 ) return;
    ycClick.timestamp = timestamp;

    // the actual code of the function
}