JavaScript，post，button直到第二次点击才会给出服务器响应

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

使用原因 预防默认：

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()手动提交表单，但这通常不需要，因为默认操作会为我们执行此操作。