javascript - 触发表单的提交事件不执行事件处理程序

Question

如果我将以下事件处理程序绑定(bind)到我的表单:

form.addEventListener('submit', function(evt) {
  evt.preventDefault();
  console.log('submitted');
  this.submit();
});

当客户端提交表单时，会执行事件处理程序，提交表单时不会再次执行事件处理程序。

但是，当将 click 处理程序附加到 anchor 元素时，相同的逻辑并不适用:

a.addEventListener('click', function(evt) {
  evt.preventDefault();
  console.log('clicked');
  this.click();
});

事件处理程序被执行了两次，链接永远不会被访问。

我有两个问题:

• 为什么 submit 与 click 的工作方式不同？
• 为什么 anchor 的 click 处理程序只执行两次，而不是无限期地执行，如果每次调用时都执行事件处理程序？

Answer 1

表单提交和元素点击是不同的 Action ，它们的行为方式不一定相同。

使用表单的提交方法时，the standard says :

Submits the form, bypassing interactive constraint validation and without firing a submit event.

这也可以在 the submission algorithm 中看到.第 6 项检查操作是否来自表单的提交方法，如果设置了“submit()”标志，则跳过验证和事件触发。

element.click设置“click in progress flag”，在创建调用处理程序函数的合成点击事件之前在内部进行检查。这可以防止单击元素导致无限递归单击事件处理程序调用。