如何在同一函数中优雅处理click与ENTER键keyup事件？

好问题！这种既要响应点击事件、又要响应Enter键按下的场景，确实可以摆脱冗余的条件判断，写出更清爽、可复用的代码。下面给你几个实用的方案：

方案1：抽离核心逻辑，分绑事件（最直观易维护） #

把要执行的核心代码单独封装成函数，然后分别绑定click事件和带过滤条件的keyup事件。虽然keyup里仍有一个简单判断，但职责明确，核心逻辑只写一次：

// 封装共用的处理逻辑
function handleMyAction() {
  // 这里写你需要执行的代码
  console.log("执行操作");
}

// 绑定点击事件
$('#SomeElement').on('click', handleMyAction);

// 绑定keyup事件，仅响应Enter键（推荐用e.key替代已废弃的keyCode）
$('#SomeElement').on('keyup', function(e) {
  if (e.key === 'Enter') {
    handleMyAction();
  }
});

方案2：自定义jQuery事件（最优雅，可全局复用） #

如果你的项目里多处需要这种Enter键触发逻辑，可以把它封装成一个自定义jQuery事件，之后绑定事件就像用原生事件一样简单，完全看不到判断语句：

// 注册自定义的enterKey事件
$.event.special.enterKey = {
  setup: function() {
    $(this).on('keyup', $.event.special.enterKey.handler);
  },
  teardown: function() {
    $(this).off('keyup', $.event.special.enterKey.handler);
  },
  handler: function(e) {
    if (e.key === 'Enter') {
      e.type = 'enterKey'; // 重写事件类型
      $.event.dispatch.apply(this, arguments);
    }
  }
};

// 直接绑定click和自定义的enterKey事件到同一函数
$('#SomeElement').on('click enterKey', function() {
  // do what needs to be done
  console.log("执行操作");
});

方案3：简洁的短路求值写法（紧凑版） #

如果追求代码精简，也可以用箭头函数配合逻辑与的短路特性，把判断直接写在事件回调里，核心逻辑依然抽离：

const handleMyAction = () => {
  // 处理逻辑
  console.log("执行操作");
};

$('#SomeElement')
  .on('click', handleMyAction)
  .on('keyup', e => e.key === 'Enter' && handleMyAction());

小提示 #

尽量使用e.key === 'Enter'替代e.keyCode === 13，因为keyCode已经被MDN标记为废弃API，e.key更语义化，兼容性也覆盖绝大多数现代浏览器。

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