jQuery绑定focusout和keypress事件，如何避免重复执行逻辑？

首先，咱们来拆解你遇到的问题：你绑定了focusout和keypress两个事件，但按下回车键时会触发两次AJAX请求——这是因为按下回车键后，浏览器不仅会触发keypress事件，还会紧接着触发focusout事件（比如你可能在回车后手动调用了blur()，或者某些场景下回车会让元素自动失去焦点）。

而你之前写的判断条件之所以失效，核心原因是：focusout事件的event.which属性是undefined（这个事件不关联按键操作），所以event.which !==13的判断结果永远是true。这就导致当回车触发keypress执行一次AJAX后，后续的focusout事件也会满足event.type === "focusout" && event.which !==13的条件，再次执行AJAX。

解决方案1：使用标记位区分触发源 #

最直观的方法是设置一个标记，记录是否是回车触发的操作，让focusout事件根据标记决定是否执行AJAX：

// 定义标记变量（如果是模块化代码，可放在局部作用域内）
let isEnterTriggered = false;

// 单独绑定回车事件
$(document).on('keypress', '.row_data', function(event) {
  if (event.which === 13) {
    event.preventDefault(); // 阻止默认行为（比如contenteditable元素的自动换行）
    isEnterTriggered = true;
    
    // 执行AJAX保存逻辑
    saveCellData($(this));
    
    // 可选：回车后让单元格主动失去焦点
    $(this).blur();
  }
});

// 绑定失去焦点事件
$(document).on('focusout', '.row_data', function() {
  if (!isEnterTriggered) {
    // 只有非回车触发的focusout才执行保存
    saveCellData($(this));
  }
  // 重置标记，确保下次事件正常触发
  isEnterTriggered = false;
});

// 封装保存逻辑，避免代码重复
function saveCellData($cell) {
  const cellContent = $cell.text().trim();
  const dataId = $cell.data('id'); // 假设单元格有data-id标识对应数据
  
  $.ajax({
    url: '/your-save-api',
    method: 'POST',
    data: { id: dataId, content: cellContent },
    success: function(response) {
      console.log('数据保存成功');
    },
    error: function(xhr) {
      console.error('数据保存失败:', xhr.responseText);
    }
  });
}

解决方案2：防抖函数合并重复触发 #

如果觉得标记位的方式不够优雅，也可以用**防抖（debounce）**的思路：设置一个短延迟，在延迟时间内如果有重复事件触发，就取消之前的执行，最终只执行一次AJAX：

let saveTimeout = null;

$(document).on('focusout keypress', '.row_data', function(event) {
  const $currentCell = $(this);
  
  // 过滤非目标事件：不是回车的keypress直接跳过
  if (event.type === 'keypress' && event.which !== 13) {
    return;
  }
  
  // 清除之前的定时器，避免重复执行
  clearTimeout(saveTimeout);
  
  // 设置新的定时器，延迟100ms执行保存
  saveTimeout = setTimeout(function() {
    const cellContent = $currentCell.text().trim();
    const dataId = $currentCell.data('id');
    
    $.ajax({
      url: '/your-save-api',
      method: 'POST',
      data: { id: dataId, content: cellContent },
      success: function(res) {
        console.log('保存成功');
      }
    });
  }, 100);
  
  // 如果是回车事件，阻止默认行为并手动失焦
  if (event.type === 'keypress') {
    event.preventDefault();
    $currentCell.blur();
  }
});

这两种方法都能有效解决回车触发两次AJAX的问题，你可以根据自己的代码风格选择合适的方案~

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