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函数的作用：

阻止默认操作运行（表单提交，文件上载窗口打开）
再次运行此功能
从点击的元素中删除此事件侦听器
记录内容

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

JavaScript，post，button在第二次点击之前不会给出服务器响应

1 个答案: