Question

我将在前言中说我非常熟悉点击事件，并知道我可以在表单提交按钮上注册点击事件，正如许多其他答案所解释的那样。我的问题更深层次。

表单可以通过其他方式提交，而不是点击提交：我想的是当用户按下输入同时专注于输入/选择，或者甚至通过按空格键或输入同时专注于提交按钮本身...而且我想希望能够获得对提交表单的元素的引用。

This answer似乎有希望，但我不确定如何“看到”他提到的价值观。我让a codepen来证明。 *编辑：我更新了codepen以反映下面接受的答案。

似乎答案实际上是不准确的，因为当用户提交表单时，浏览器会触发表单中第一次提交的click事件，不元素之后的第一次提交触发了提交（至少当我在Chrome / Firefox / Safari中运行Codepen时）。

为了说明为什么这是必要的背景，我正在研究Asp.NET site where every page's content is encapsulated in a monolithic form。我正在向异步提交的页脚添加一个电子邮件订阅表单...这意味着我需要对该事件执行e.preventDefault()，并且如果表单实际上是从其他地方（如搜索）提交的，也希望避免意外提交顶部或我不知道的形式。

Answer 1

您可以使用document.activeElement这可用于点击，当用户选中按钮并按下回车按钮时。

在表单上侦听提交事件，然后在回调内部引用document.activeElement，它将是用户点击或选中的按钮。

实施例： http://codepen.io/anon/pen/KVoJrJ

Answer 2

<form>元素的Submit事件实际上包含对submitter的引用：
https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

form.onsubmit = (event) => {
    const formElement = event.target;
    const formSubmitter = event.submitter;
    console.log("The form element itself", formElement);
    console.log("The submitter of the form (usually an HtmlInputElement)", formSubmitter);

    const formData = new FormData(formElement);
    if(formSubmitter) formData.set(formSubmitter.name, formSubmitter.value);

    fetch(formElement.action, {
        method: formElement.method,
        body: formData,
    })

    event.preventDefault();
}

注意：检查此功能的兼容性。

确定哪个元素触发了表单提交事件

2 个答案: