如何防止 onclick 事件多次触发？答案

【问题标题】：How can I prevent onclick event from firing more than once?如何防止 onclick 事件多次触发？
【发布时间】：2013-05-30 05:32:35
【问题描述】：

情况就是这样，我之前也问过这个问题，但我仍然没有让这个工作如我所愿。

我有一个附加到单击事件的复杂函数，该函数进行 AJAX 调用，然后在模式对话框中显示该信息。

虽然我的示例使用的是 jQuery 移动端，但我需要它通过原生 JavaScript 工作，因为我有使用 jQuery 移动端的移动端和不使用任何 jQuery 的桌面端。这不是我想要的，但它也是我无法控制的。

所以，您可以在 JSFiddle 看到我的示例。对于这个示例，我只是使用超时来模拟我遇到的问题。如果您多次单击该链接，它将多次触发该事件。我需要防止这种行为。我已经尝试event.preventdefault 并删除了事件监听器和其他一些东西，但我似乎无法重新附加 onclick。因此，一旦关闭对话框，用户就无法重新使用该链接，如果他们愿意的话。由于此对话框的呈现方式（如果可能），我想尝试将所有这些都包装到一个函数中。

我正在寻找一个简单而优雅的解决方案，但我无法为这个问题找到一个好的解决方案。

谁能提供一些解决方案？

【问题讨论】：

你不能添加一个标志，比如 var modalDialogRequestInFlight。这默认为false，但在启动时设置为true，并在显示模态对话框时翻转为false？如果对话框无法显示，您还需要清除标志。如果一个已经在飞行中，则将在“点击”处理程序上检查此标志以防止重复请求。
是的，我实际上也尝试过类似的方法，但是我必须使用一些模态。但是，在阅读了这篇文章和 Arun P Johny 的建议之后，我想我可能知道如何让这项工作满足我的需要。感谢您的评论。

标签： javascript onclick onclicklistener

【解决方案1】：

你可以使用一个标志来控制点击行为

前

var inProgress = false;
function showDialog() {
    inProgress = false;
    $.mobile.changePage("#dialog", {transition:"pop"});
}

function callDialog() {
    if(inProgress){
        return;
    }
    inProgress = true;
    setTimeout(showDialog, 1000);
}

演示：Fiddle

【讨论】：

我最初尝试过这样的事情，但是有几个我正在使用的对话框，所以这似乎是一个非常乏味的方法，但在考虑了更多之后，我认为有一种方法我现在可以完成我以前没有考虑过的工作。谢谢。

【解决方案2】：

更新了你的小提琴，基本上只是在点击后删除 onclick 处理程序，然后在完成后重新添加它

function callDialog() {
    console.log("been clicked");
    var anchor = document.getElementById("dosomethinganchor");           
    anchor.onclick = null;       // remove onclick function
    setTimeout(function () {
        anchor.onclick = callDialog;   //  got response back, make sure we add onclick back
        showDialog();
    }, 1000);
}

http://jsfiddle.net/rvuZ6/8/

【讨论】：

感谢您的建议，不幸的是，您的小提琴实际上仍然表现出我所描述的行为。如果您连续多次单击该链接，然后关闭第一个弹出窗口，则会出现另一个弹出窗口。我也尝试了一些从元素中删除 onclick 的方法，但是由于我不会在此处介绍的原因，我无法以优雅的方式恢复功能。不过，谢谢你的回答。
jsfiddle.net/rvuZ6/8 我错误地虽然“this”引用了锚元素。您必须通过 id 显式查找链接才能获取 onclick 方法。与跟踪按钮操作所处状态的另一个变量相比，开销更少。