JavaScript、post和按钮在第二次单击之前不会给出服务器响应

我有一个脚本，它扫描页面上的所有按钮，并将每个按钮的点击记录到数据库中。不幸的是，在第二次单击之前，按钮数据不会提交。我是否在正确的位置使用addEventListener和removeEvent listener

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, '', '', '');

}

var trkButtons=document.getElementsByTagName（'input'）；
对于（变量i=0；i

好的，下面是您的

addBtnClickListener

函数的作用：

阻止运行默认操作（表单提交、文件上载窗口打开）

再次运行此函数

从单击的元素中删除此事件侦听器

原木

表单提交第二次起作用，因为第一次，在步骤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, '', '', '');
}

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

使用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, '', '', '');
}

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（）

手动提交表单，但这通常不是必需的，因为默认操作会为我们这样做。

为什么要重新启动事件侦听器？为什么要触发新的单击事件？你想实现什么？我正在数据库中记录点击，我需要删除它并再次触发它，以阻止点击击中服务器端，然后才能记录。它用于跟踪目的。除了Chrome，它在大多数情况下都能工作，表单是在点击事件被跟踪之前提交的。听起来很有趣。我设置了一个小测试小提琴。对我来说，这两个事件都在Chrome中工作，每个动作都发生在表单提交之前。您是否尝试过表单提交事件而不是提交按钮单击事件？