提交表单的事件监听器

Question

我为表单提交编写了一个事件侦听器，这导致了我一些问题。当在文本字段内按“输入”时，一切正常。但是，我有一个跨度（带有背景图像）也通过单击事件提交表单。这不能正常工作，我不明白为什么。

这是基本的 HTML：

<form name="myForm">
  <input type="text" name="search" />
  <span id="search-button"></span>
</form>

这是事件侦听器的 JS：

function evtSubmit(e) {
  // code
  e.preventDefault();
};

var myform = document.myForm;
if (myform.addEventListener) {
  myform.addEventListener('submit', evtSubmit, false);
}

这是“span”及其单击事件的 JS：

var searchButton = document.getElementById('search-button');
if (searchButton) {
 searchButton.onclick = function() {
  document.myForm.submit();
 };
}

注意：span 的单击事件的 JS 位于单独的 JS 文件中，目前无法访问，因此需要更改该脚本不是一个选择。如果解决此问题的唯一方法是更新该文件，我可以...但由于流程超出我的控制范围，这要困难得多。

Answer 1

调用form.submit()时，不会触发onsubmit事件。作为替代方案，您可以将操作属性设置为 javascript:evtSubmit(event)：

function evtSubmit(e) {
  // code
  e.preventDefault();
};

var myform = document.myForm;
myform.setAttribute('action', 'javascript:evtSubmit();');