Как использовать addEventListener () Javascript для переопределения поведения submit () HTML-формы по умолчанию

Question

Как я могу использовать addEventListener (), чтобы назначить обработчик для кнопки «Отправить» в HTML-форме, аналогично назначению атрибута кнопки «onclick», без запуска поведения формы по умолчанию (*)?

У меня нет проблем с назначением пользовательской функции атрибуту «onclick» кнопки «Отправить». Пользовательская функция выполняет множество шагов, затем создает объект запроса Ajax и использует его для отправки данных на сервер. Поведение по умолчанию submit () не запускается.

submitButton.onclick = function() {
    mySubmit();
    return false;
};

function mySubmit() {
   //do stuff
   notTheDefaultUrl = generateNonStandardUrl();
   request = GetStandardAjaxRequestThingamabob();
   request.open("POST", notTheDefaultUrl, true);
   request.onreadystatechange = myHandler;
   request.send(formData);
   return false;
}

Но с помощью addEventListener () браузер отправляет запрос дважды - один раз под объектом запроса Ajax и снова с поведением submit () HTML-формы по умолчанию. (Я могу сказать b / c, что функция mySubmit отправляет данные по другому URL-адресу, чем по умолчанию - но в журналах сервера появляются как URL-адрес по умолчанию, так и URL-адрес Ajax.)

var func = window['mySubmit'];
submitButton.addEventListener('click', func, false);

Мне известно, что функция, назначенная кнопке, должна возвращать значение false, чтобы не вызывать поведение по умолчанию submit (). Я думал, что mySubmit () сделал это, и я попытался написать функцию, переданную через addEventListener, чтобы возвращать false более явно (вместо 'func', 'function () {mySubmit (); return false}'), но эти задачи тоже не работает.

Так как мне это сделать?

UPDATE

Комментарии к Peter's подняли некоторые проблемы совместимости браузера; также IE не поддерживает addEventListener (). Этот код обращается к этим. Я тестировал его в Firefox и IE 8.

function func( event ) {
    if ( event.preventDefault ) { event.preventDefault()};  
    event.returnValue = false;  
    // do whatever
}

if (submitButton.addEventListener) {
    submitButton.addEventListener('click', func, false);
}
else {
    submitButton.attachEvent('onclick', func);
}

Извиняюсь за грязное форматирование новичка.

Answer 1

Вам необходимо получить событие в вашей функции-обработчике и не дать событию выполнить его поведение по умолчанию. Это относится к click событиям, submit событиям - на самом деле к любому событию, которое можно отменить.

// using your example
submitButton.addEventListener('click', func, false);

// here's what func should look like    
function func( event )
{
  if ( event.preventDefault ) event.preventDefault();
  event.returnValue = false;
  // do whatever
}

Answer 2

Не следует ли добавить обработчик как список событий для события "submit"?

Имеет смысл, что обработчик события "click", возвращающий false, не мешает поведению отправки по умолчанию, я думаю. В некотором смысле имеет смысл, что форма отправляется обеим целям.

редактировать: добавлен второй абзац.

комментарий: И, как говорит Кен, в форму следует добавить прослушиватель событий, а не кнопку.

править 2: Значит, я ошибся. Вы не должны использовать «return false»; но что-то вроде ...

event.preventDefault ? event.preventDefault() : event.returnValue = false;

Answer 3

EASY WAY: установить атрибут onsubmit формы для возврата false

<form onsubmit="return false;">

Теперь, если это ДОЛЖНО быть сделано путем назначения прослушивателя событий через javascript, тогда ответ, данный Питером Бэйли, идеален.

Мой валидатор форм делает именно то, что вы пытаетесь сделать. Проверьте этот пример

http://murdog05.github.com/yui3-gallery/examples/json/beforeSubmitExample.html

И код базы

http://yuilibrary.com/gallery/show/formvalidator

Возможно, вам будет удобно.