0

我有一个脚本，它正在扫描页面上的所有按钮并将每个按钮的点击记录到数据库中。不幸的是，直到第二次点击按钮数据才会提交，我是否在正确的位置使用 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, '', '', '');

}
4

1 回答 1

0

好的，这就是你的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()但这通常不需要，因为默认操作会为我们执行此操作。

于 2013-09-14T00:46:32.813 回答