JavaScript, почта, кнопка не даст ответа сервера до второго щелчка

Question

У меня есть скрипт, который сканирует страницу для всех кнопок и записывает клик каждого в базу данных. К сожалению, данные кнопки не будут отправляться до второго щелчка. Я использую addEventListener и removeEvent прослушиватель в правильном месте?

var trkButtons = document.getElementsByTagName('input'); 

for (var i = 0; i < trkButtons.length; ++i) { 

    //submit button 
    if (trkButtons[i].getAttribute("type") == "submit") { 
     trkButtons[i].addEventListener("click", addBtnClickListener, false); 
    } 

    //image button 
    if (trkButtons[i].getAttribute("type") == "image") { 
     trkButtons[i].addEventListener("click", addBtnClickListener, false); 
    } 

    //file upload 
    if (trkButtons[i].getAttribute("type") == "file") { 
     trkButtons[i].addEventListener("click", addBtnClickListener, false); 
    } 
    else { } 
} 

function addBtnClickListener(e) { 
    e.preventDefault(); 

    this.click(); 
    this.removeEventListener('click', addBtnClickListener, false); 

    var eventType = "button.click"; 
    var ctrBtnText = this.value; 
    track(this, eventType, '', '', ctrBtnText, '', '', ''); 

} 

Answer 1

Итак, вот что ваша addBtnClickListener функция делает:

1. предотвращает действие по умолчанию для запуска (форма представления, окно загрузки файла открытия)
2. Выполнить эту функцию еще раз
3. Удалить этот прослушиватель событий из элемента с щелчком
4. Ведение журнала

Подача формы работает во второй раз, потому что в первый раз на шаге 3 вы удаляете этот обработчик событий, который фактически предотвращает отправку формы.
Если вы не хотите предотвращать поведение по умолчанию, такое как отправка формы, открытие диалогового окна загрузки файлов и т. Д., То вы не должны использовать e.preventDefault().

Возможное решение:

function addBtnClickListener(e) { 
    // the code below will be executed, before the form is submitted 
    // no need for other action if this is all we do 
    var eventType = "button.click"; 
    var ctrBtnText = this.value; 
    track(this, eventType, '', '', ctrBtnText, '', '', ''); 
} 

Причина использовать preventDefault:

function validateForm(e) { 
    var data = document.getElementById('someData').value; 
    if (isValid(data) === false) { 
     e.preventDefault(); 
     // ask user to correct invalid data here 
    } 
} 

Примечание: вы можете представить формы вручную с this.form.submit(), но это, как правило, не требуется, как действие по умолчанию делает это для нас.