提交表單的事件監聽器

Question

我為表單提交編寫了一個事件偵聽器，這導致了一些問題。 在文本字段內按“輸入”時，一切正常。 但是，我有一個跨度（帶有背景圖像），它也可以通過click事件提交表單。 這不能正常工作，我不知道為什么。

這是基本的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的click事件的JS位於單獨的JS文件中，並且無法訪問atm，因此更改該腳本的選擇較少。 如果解決此問題的唯一方法是更新該文件，則可以...但是由於無法控制的過程，要困難得多。

Answer 1

調用form.submit() ，不會觸發onsubmit事件。 或者，您可以將action屬性設置為javascript:evtSubmit(event) ：

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

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