BackboneJS按下回车键触发表单提交而非预期函数调用问题

我来帮你搞定这个问题！你遇到的是表单回车默认提交的经典坑，咱们一步步解决：

问题根源 #

当表单内存在输入框时，按下回车键浏览器会自动触发表单的默认submit行为——哪怕你没有设置type="submit"的按钮，这个默认行为会优先于你的自定义函数执行，导致出现你不想看到的页面跳转或刷新。

两个关键修改 #

你只需要调整Backbone View里的keyAction方法，加上两个关键点：

1. 阻止浏览器默认行为：用e.preventDefault()掐掉默认的表单提交逻辑
2. 修正函数调用上下文：直接调用sendConfirmPhoneNumberCode()会导致this指向错误，必须用this.sendConfirmPhoneNumberCode()来调用View实例内的方法

修改后的完整代码 #

$view.UserProfile_ConfirmPhoneNumber = Backbone.View.extend({
    el: "#confirmPhoneNumberForm",
    events: {
        "click #send-confirm-phone-number-code": "sendConfirmPhoneNumberCode",
        'keydown': 'keyAction',
    },
    keyAction: function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            // 阻止浏览器默认的表单提交行为
            e.preventDefault();
            // 正确调用View内的方法，确保this指向当前View实例
            this.sendConfirmPhoneNumberCode();
        }
    },
    sendConfirmPhoneNumberCode: function() {
        // 你的业务逻辑代码
    }
})

额外保险方案（可选） #

如果担心还有其他场景会触发表单默认提交，可以给表单的submit事件也绑定阻止逻辑：

$view.UserProfile_ConfirmPhoneNumber = Backbone.View.extend({
    el: "#confirmPhoneNumberForm",
    events: {
        "click #send-confirm-phone-number-code": "sendConfirmPhoneNumberCode",
        'keydown': 'keyAction',
        "submit": "preventDefaultSubmit" // 新增submit事件绑定
    },
    keyAction: function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            e.preventDefault();
            this.sendConfirmPhoneNumberCode();
        }
    },
    preventDefaultSubmit: function(e) {
        // 彻底阻止任何表单默认提交行为
        e.preventDefault();
    },
    sendConfirmPhoneNumberCode: function() {
        // 你的业务逻辑代码
    }
})

这样就能完全避免回车键触发的默认表单提交，只执行你自定义的sendConfirmPhoneNumberCode函数啦！

内容的提问来源于stack exchange，提问作者Moji