通过内联 JavaScript 提交表单时使用提交事件侦听器？答案

【问题标题】：Use submit event listener when form is submitted via inline JavaScript?通过内联 JavaScript 提交表单时使用提交事件侦听器？
【发布时间】：2013-05-27 07:36:09
【问题描述】：

我们有一个脚本，通过向表单添加事件监听器来跟踪表单提交。问题是一位客户通过链接提交表单使用

<a href="javascript:document.formname.submit();">Submit</a>

忽略事件监听器。这是一个 JSFiddle 来演示：http://jsfiddle.net/XhLkG/

如您所见，提交按钮触发警报，而提交链接只是提交表单并绕过事件侦听器。

有没有办法仍然触发事件监听器？

编辑：我们无法更改标记，因为它位于我们客户的主页上，他们嵌入了我们的脚本。对不起，如果我没有说清楚。

【问题讨论】：

标签： javascript javascript-events

【解决方案1】：

你可以用这个：

var form = document.getElementsByClassName('form');
form[0].addEventListener("submit", function(e) {

    e.preventDefault();

    alert('event');

});
form[0].childNodes[3].addEventListener("click", function(e) {

    e.preventDefault();

    alert('event');

});

【讨论】：

【解决方案2】：

不要使用 href 试试这个

<form method="post" name="formname" class="form">
    <input type="text" name="hello">
    <a onclick="javascript:document.formname.submit();">Submit</a>
    <input type="submit">
</form>

删除href 并将其替换为onclick

【讨论】：

谢谢，但我无法控制链接。客户已在其主页上嵌入了我们的脚本。
hrefs 不应从锚点中删除，这会导致它们无法正常运行，并且还会破坏浏览器的默认样式。使用 href="#" （它会将您带到页面顶部）或 href="javascript:void(0)" （最佳选择）

【解决方案3】：

使用 jquery 尝试以下操作：

$("form").submit(function (e) {
      e.preventDefault();

      alert('event');
});

参考here。

【讨论】：