表格单元格双击进入编辑模式后，如何实现点击外部退出编辑状态

核心思路 #

1. 给进入编辑状态的单元格添加专属标记类（例如editing），用于快速识别编辑态元素
2. 绑定全局点击事件，仅当存在editing类的元素时才执行退出逻辑，避免无意义的性能消耗
3. 阻止单元格双击事件冒泡，避免刚进入编辑状态就被全局点击事件误触发退出
4. 全局点击逻辑中判断点击目标是否属于编辑态单元格内部，仅当点击外部时执行退出逻辑，不会拦截/干扰页面其他原有点击事件的执行

完整代码示例 #

首先修改你原有的双击事件代码，补充标记类和冒泡阻止：

$('table tbody tr td').dblclick(function(e){
    // 阻止事件冒泡到document，避免触发全局点击退出逻辑
    e.stopPropagation();
    var cell = $(this);
    // 先清空其他可能的编辑态单元格，保证同一时间只有一个单元格编辑
    $('td.editing').each(function(){
        // 这里可以调用你封装的退出编辑方法
        $(this).removeClass('editing').text($(this).data('original-value') || '');
    });
    var value = cell.text();
    // 缓存原始值，退出编辑时如果需要回滚可以用
    cell.data('original-value', value);
    // 添加编辑态标记
    cell.addClass('editing');
    var rowIndex = cell.parent().index('table tbody tr');
    var tdIndex = cell.index('table tbody tr:eq('+rowIndex+') td');
    // 你原有进入编辑的逻辑，比如插入input之类的
    // ...
});

然后补充全局点击事件的监听逻辑，放在双击事件代码外部即可：

$(document).on('click', function(e) {
    // 先判断是否存在编辑态单元格，不存在直接返回，不做任何操作
    var $editingCell = $('td.editing');
    if ($editingCell.length === 0) return;
    // 判断点击的目标是否在编辑态单元格内部，内部点击不触发退出
    if ($editingCell.has(e.target).length === 0 && !$editingCell.is(e.target)) {
        // 执行你的退出编辑逻辑，比如移除input、恢复文本展示
        // 示例逻辑：
        // $editingCell.text($editingCell.find('input').val() || $editingCell.data('original-value'));
        // 移除编辑态标记
        $editingCell.removeClass('editing');
    }
});

逻辑说明 #

• 全局点击事件仅在存在编辑态单元格时才执行后续逻辑，不会占用多余性能
• 全程没有调用e.stopPropagation()或者e.preventDefault()，不会干扰页面其他已绑定的点击事件执行
• 同一时间仅保留一个编辑态单元格，避免多个单元格同时进入编辑导致的逻辑混乱

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