在默认行为后执行的 Javascript 事件处理程序答案

【问题标题】：Javascript event handler to execute after default behavior在默认行为后执行的 Javascript 事件处理程序
【发布时间】：2013-06-09 04:56:33
【问题描述】：

在 Javascript 中，我如何附加一个事件处理程序以便它在默认操作之后运行？

<form target="_blank" action="submit.php" onsubmit="doThisAfterSubmit()">
    <input type="submit" onclick="doThisAfterSubmit()" />
</form>

类似但不足的 Stack Overflow 问题：

javascript: Possible to add event handler that runs after the default behavior?

How to catch event after default action was performed in JavaScript

我已阅读这些内容，但它们正在处理通过使用诸如keyup 而非keypress 的变体解决的击键事件。我见过的唯一其他解决方案是setTimeout() 方法。我想避免使用setTimeout() 来支持更优雅的解决方案（如果存在）。

我的用例是我想在提交后从 DOM 中删除表单。

【问题讨论】：

“在默认行为之后”是什么意思？ POST 请求何时发送？何时收到回复？
一旦提交完成，另一个页面被加载，你的javascript丢失了，所以答案很简单，你不能！
@adeneo 提示：查看表单的target 属性。
给表单一个ID（让我们使用test），onclick="document.getElementById('test').style.display = 'none';"。表单被提交，消失。
onsubmit="this.style.display = 'none';" 完美运行。也许问题出在您的doThisAfterSubmit() 函数中？

标签： javascript jquery events jquery-events

【解决方案1】：

您可以自己执行默认操作，然后执行您想要的操作，然后阻止默认操作运行。

<form target="_blank" action="submit.php"
        onsubmit="this.submit(); doThisAfterSubmit(this); return false;">
    <input type="submit" />
</form>

注意：在“onsubmit”中调用this.submit() 不会像您想象的那样导致无限循环。

jsfiddle demo

编辑： 我原来的 jsfiddle 只在表单提交后显示文本。我又试了一次，但改变了它以删除你想要的表格。这导致表单不再提交，即使首先调用了this.submit()。在这种情况下，您可以使用setTimeout() 来延迟删除表单，直到原始线程完成执行，如下所示：

function doThisAfterSubmit(form) {
    setTimeout(function() {
        $(form).remove();
    }, 0);
};

现在表单在被删除之前已提交。

jsfiddle demo

【讨论】：

你回答的第一部分让我很兴奋，然后不得不使用setTimeout() 让我很沮丧。然后我尝试了你的第二个小提琴并删除了setTimeout()，然后运行了$(form).remove()，它运行得很好！
@ogc-nick - 我想知道它是否会在不同的浏览器上以不同的方式工作，显然它确实如此。它在 Chrome 27 和 IE 10 上没有 setTimeout() 也能工作，但在 Firefox 27 上不能工作。
啊，很有趣。是的，我正在用 chrome 测试它。不幸的是，我的目标浏览器是 Firefox，我只是没想到 FF 和 Chrome 在这一点上会有所不同。不过我仍然喜欢这种方法。
不可取消的活动怎么办？
@LorenShqipognja - 你在想什么样的活动？

【解决方案2】：

您可以改用事件冒泡：

<div onclick="this.remove();">
  <form target="_blank" action="submit.php" onsubmit="alert('submitted);">
    <input type="submit" />
  </form>
</div>

【讨论】：