如果将以下事件处理程序绑定到我的form:

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

当客户端提交表单时,将执行事件处理程序并执行the form is submitted without the event handler being executed again.

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

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

事件处理程序执行两次,并且从不遵循链接.

我有两个问题:

  • 为什么它在submitclick之间的工作方式有所不同?
  • 如果每次调用事件处理程序时都会执行它,为什么锚的click处理程序只执行两次,而不是无限期执行?

推荐答案

表单提交和元素单击是不同的操作,它们的行为不必相同.

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

提交表单,绕过交互式约束验证,而不触发提交事件.

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

element.click设置"click in progress flag",在创建调用hander函数的syntehtic click事件之前对其进行内部判断.这可以防止单击元素导致无限递归的单击事件处理程序调用.

Javascript相关问答推荐

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

分层树视图

显示图—如何在图例项上添加删除线效果?

在286之后恢复轮询

使用LocaleCompare()进行排序时,首先使用大写字母

编辑文本无响应.onClick(扩展脚本)

我在Django中的视图中遇到多值键错误

如何将数组用作复合函数参数?

如何 for each 输入动态设置输入变更值

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

AJAX POST在控制器中返回空(ASP.NET MVC)

将相关数据组合到两个不同的数组中

在JS/TS中将复杂图形转换为数组或其他数据 struct

需要刷新以查看Mern堆栈应用程序中的更改

浮动标签效果移除时,所需的也被移除

webpack 5和mini-css-extract-plugin在将scss保存到css文件后不加载css

在两个数组范围中输入日期范围

导航栏中显示项目的方式有问题

用对象填充数组的快速方法

更改垫子树界面线条边框底部问题的方向设计Angular