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

jos*_*omp 4 html javascript forms jquery javascript-events

首先,我会说我非常熟悉click事件,并且知道我可以在表单提交按钮上注册一个click事件,正如许多其他答案所解释的那样。我的问题是更深层次的。

除了单击提交外,还可以通过其他方式提交表单:我在想,当用户在专注于输入/选择时按下Enter键,或者甚至在关注提交按钮本身时按下空格或Enter键……我想能够获得对提交表单的元素的引用。

这个答案似乎很有希望,但是我不确定如何“看”他提到的价值观。我制作了一个Codepen进行演示。*编辑:我更新了代码笔,以反映下面接受的答案。

似乎实际上答案也不正确,因为当用户提交表单时,浏览器会触发表单中第一个提交的click事件,而不是触发提交的元素之后的第一个提交(至少当我运行时) Chrome / Firefox / Safari中的那个Codepen)。

为了说明为什么这样做是必要的,我正在一个Asp.NET网站上工作,其中每个页面的内容都以整体形式封装。我要在页脚中添加一个异步提交的电子邮件订阅表单…这意味着我需要对e.preventDefault()事件进行处理,并且如果表单实际上是从其他位置(例如顶部的搜索栏或我不知道的表格。

小智 6

您可以使用“ document.activeElement这将对单击有效,并且在用户使用Tab键单击按钮并单击Enter按钮时有效”。

侦听表单上的Submit事件,然后在回调中引用reference document.activeElement,它将是用户单击或制表到的按钮。

示例:http//codepen.io/anon/pen/KVoJrJ

  • 看那个!更新了我的代码笔以使用“document.activeElement”,完全按照我的希望工作。谢谢 (2认同)
  • FWIW在Mac上的Firefox或Safari上不起作用。来自MDN的文章:“在Mac上,不是文本输入元素的元素往往不会获得焦点分配。” 不过,这似乎在Mac上的Chrome浏览器上可以运行。 (2认同)