如何在jQuery中阻止点击事件？解决Toggle开关弹窗交互异常

当前Toggle开关存在逻辑问题：点击开关切换为ON状态时会弹出弹窗，但再次点击开关会直接切回OFF状态并关闭弹窗。实际需求是：开关切换为ON并弹出弹窗后，必须点击弹窗的关闭按钮，才能将开关切回OFF状态。

现有代码的核心问题 #

• 重复绑定了#isImpliedDelete的点击事件，触发逻辑冲突
• 用模运算status%2判断状态，逻辑不够直观，容易出错
• 没有限制弹窗显示时开关的关闭操作，导致用户可直接点击开关取消状态

修改后的完整代码 #

$(document).ready(function () {
    // 标记弹窗是否处于激活状态
    let popupActive = false;
    const toggleSwitch = $('#isImpliedDelete');
    const popup = $('#myPopup');
    const submitBtn = $('#submitBtn');

    // 统一处理开关点击事件
    toggleSwitch.on('click', function () {
        // 如果弹窗已激活，不允许直接关闭开关
        if (popupActive) {
            return;
        }
        
        // 切换开关到ON状态，显示弹窗，禁用提交按钮
        popup.show();
        popupActive = true;
        submitBtn.prop('disabled', true);
    });

    // 弹窗确认按钮逻辑：仅隐藏弹窗，保持开关ON状态，启用提交按钮
    $('#ok').on('click', function () {
        popup.hide();
        popupActive = false;
        submitBtn.prop('disabled', false);
    });

    // 弹窗关闭按钮逻辑：隐藏弹窗，切回开关OFF状态，启用提交按钮
    $('#close').on('click', function () {
        popup.hide();
        popupActive = false;
        submitBtn.prop('disabled', false);
        // 若开关是checkbox类型，可添加此行重置UI状态：
        // toggleSwitch.prop('checked', false);
    });
});

关键改动说明 #

1. 新增状态标记：用popupActive变量跟踪弹窗是否显示，避免用户在弹窗打开时直接点击开关关闭状态
2. 统一事件处理：移除重复的点击绑定，集中处理开关的点击逻辑，只允许在弹窗未激活时切换到ON状态
3. 拆分弹窗按钮逻辑：
   • 确认按钮：仅关闭弹窗，保持开关的ON状态，同时启用提交按钮
   • 关闭按钮：关闭弹窗的同时，重置开关状态（可根据实际UI组件调整开关的重置方式）
4. 简化状态判断：直接通过变量标记状态，替代原有的模运算逻辑，更直观易懂

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