按钮已禁用仍响应点击事件，如何实现点击后禁用提交按钮防重复下单？

哦，这个问题我太熟悉了！你现在的核心问题是混淆了按钮的可见性和启用状态两个完全独立的属性——setVisible(false)只是把按钮从界面上隐藏，但它并没有真正禁用按钮的交互能力：如果用户在按钮消失前快速多次点击，或者按钮的DOM元素仍存在的情况下，点击事件依然会被触发，自然会生成多个订单。而且你用getEnabled()检查的是按钮的启用状态，和可见性完全不相关，所以才会出现看似矛盾的情况。

正确的解决方案：先禁用按钮，再处理订单逻辑 #

你需要用setEnabled(false)来真正禁用按钮，阻止后续的点击事件，而不是只隐藏它。这里给你两种场景的实现方式：

1. 同步订单创建场景

如果你的订单创建是同步操作，直接禁用按钮即可：

onSubmit: function(oEvent) {
    // 获取按钮实例
    const oSaveBtn = this.getView().byId("save");
    // 先禁用按钮，彻底阻止后续点击
    oSaveBtn.setEnabled(false);
    // 如果你确实需要隐藏按钮，再调用setVisible（可选）
    // oSaveBtn.setVisible(false);
    
    // 你的订单创建逻辑......
    
    // 如果需要恢复按钮（比如操作完成后允许再次提交），再启用
    // oSaveBtn.setEnabled(true);
    // oSaveBtn.setVisible(true);
}

2. 异步订单创建场景（更常见，比如调用OData服务）

如果是异步请求，一定要在请求发起前就禁用按钮，并且在请求完成（成功/失败）后恢复按钮状态，避免用户无法再次操作：

onSubmit: function(oEvent) {
    const oSaveBtn = this.getView().byId("save");
    // 额外防护：如果按钮已经禁用，直接返回，避免重复执行
    if (!oSaveBtn.getEnabled()) {
        return;
    }
    // 禁用按钮
    oSaveBtn.setEnabled(false);
    
    // 示例：调用OData模型创建订单
    const oOrderData = { /* 你的订单数据 */ };
    this.getModel().create("/Orders", oOrderData, {
        success: () => {
            // 订单创建成功后的处理（比如提示、页面跳转）
            // 可选：如果需要允许用户再次提交，恢复按钮
            // oSaveBtn.setEnabled(true);
        },
        error: (oError) => {
            // 错误处理（比如提示用户失败原因）
            // 必须恢复按钮，允许用户重试
            oSaveBtn.setEnabled(true);
        }
    });
}

关键知识点 #

• setVisible(false)：仅控制按钮是否在UI上显示，不影响按钮的交互能力，按钮的enabled状态默认还是true。
• setEnabled(false)：真正禁用按钮的交互事件，同时UI上会自动显示禁用样式（灰掉、无法点击），彻底阻止点击触发事件。
• 对于异步操作，一定要在回调中恢复按钮状态，否则按钮会一直处于禁用状态，影响用户体验。

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