Question

这似乎是一个简单的问题，但我似乎无法使其正常工作。

我有无法更改的代码段（CMS环境）：

document.getElementById('mybutton').addEventListener('click', function (event) {
  document.getElementById('myform').submit();
});

HTML标记大致如下：

<form id="myform" onsubmit="return helloworld(event);">
  <button id="mybutton">click to submit</button>
</form>

唯一不能更改标记的部分是按钮必须存在于表单内。

我尝试使用onsubmit，尝试使用纯JS捕获提交事件，还尝试使用jQuery捕获提交，但都不起作用：

function helloworld(event) {
  event.preventDefault();
  return false;
}

document.getElementById('myform').addEventListener('submit', function (event) {
  event.preventDefault();
  return false;
});

$('#myform').submit(function (event) {
  event.preventDefault();
  return false;
});

放在一起：

//this function cannot be altered
document.getElementById('mybutton').addEventListener('click', function (event) {
	document.getElementById('myform').submit();
});

//anything below this line can be altered
document.getElementById('myform').addEventListener('submit', function (event) {
	event.preventDefault();
  return false;
});

$('#myform').submit(function (event) {
	event.preventDefault();
  return false;
});

function helloworld(event) {
	event.preventDefault();
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" onsubmit="return helloworld(event);" action="https://stackoverflow.com/">
  <!-- this button must exist inside the form -->
  <button id="mybutton">click to submit</button>
</form>

这是jsfiddle：https://jsfiddle.net/7c8e3hns/

非常感谢您的帮助！

Answer 1

将事件侦听器更改为侦听'click'事件而不是'submit'事件，该怎么办？然后不要使用event.preventDefault();，而是使用event.stopPropagation();然后执行您想要的操作？

根据Mozilla docs（https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault）：

“ {preventDefault()方法告诉用户代理，如果未明确处理事件，则不应像通常那样采取其默认操作。”

但是，在这种情况下，已经对其进行了显式处理，因此stopPropagation()应该合适。

Answer 2

找到了答案https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

注意：“如果表单控件（例如，提交按钮）的name中有id或submit，则此方法将屏蔽表单的Submit方法。”

只需使用id“ submit”和event.preventDefault()放置不可见的表单输入即可，而不会干扰click事件中的所有其他代码。

捕获由按钮单击事件触发的HTML表单提交事件

2 个答案: