为表单提交添加事件监听器

Question

我为表单提交编写了一个事件监听器，但遇到了一些问题。在文本字段内按“Enter”键时，一切都正常。但是，我有一个带有背景图像的span（通过单击事件也可以提交表单）。这不起作用，我无法弄清楚原因。

以下是基本的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' 元素及其点击事件的 JavaScript 代码：

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

注意：目前span点击事件的JS代码在另一个JS文件中且无法访问，因此更改该脚本的可能性较小。如果修复此问题的唯一方法是更新该文件，则可以这样做...但由于某些不受我控制的流程，这更加困难。

- CoryDorning

---

这实际上是一个很好的问题，如果它的标题是"在表单上覆盖内置的Javascript提交方法"可能会获得更多的关注。 - Chris Shouts

Answer 1

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

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

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

- Lekensteyn

---

抓到你了。重写原型对象上的“submit”事件能解决这个问题吗？ - CoryDorning

兄弟，你救了我的一天！ :) - BananaDeveloper

@raphael75 请尝试使用上面代码中建议的 javascript:evtSubmit(event)。 - Lekensteyn