如何在JavaScript的test函数中区分回车触发与按钮点击？

嘿，这个问题其实有几种很直观的解决办法，我给你拆解一下：

方法1：直接给函数传标记参数（最简单易维护！） #

这种方式最直白，就是在调用test()的时候，直接告诉它触发来源是什么。修改你的代码如下：

修改后的HTML： #

<input id="data" type="text" name="data" value="" onkeypress="test('input')" />
<button id="button" type="submit" onclick="test('button')">button</button>

修改后的JavaScript： #

function test(triggerSource) {
  let data = document.getElementById("data");
  let button = document.getElementById("button");
  
  // 处理输入框回车键触发的情况
  if (triggerSource === 'input' && event.key === 'Enter') {
    console.log("触发来源：输入框的回车键");
    // 这里写你的业务逻辑
  } 
  // 处理按钮点击触发的情况
  else if (triggerSource === 'button') {
    console.log("触发来源：按钮点击");
    // 这里写你的业务逻辑
  }
}

这种方式代码清晰，后续维护也方便，一眼就能看出来触发逻辑的区分依据。

方法2：通过事件对象区分来源 #

如果你不想修改HTML里的调用参数，也可以利用浏览器自带的事件对象来判断触发来源：

先修改HTML，把事件对象传给函数： #

<input id="data" type="text" name="data" value="" onkeypress="test(event)" />
<button id="button" type="submit" onclick="test(event)">button</button>

然后在JavaScript里判断： #

function test(event) {
  let data = document.getElementById("data");
  let button = document.getElementById("button");
  
  // 判断是输入框的回车键触发
  if (event.type === 'keypress' && event.key === 'Enter') {
    console.log("触发来源：输入框回车");
    // 你的业务逻辑
  } 
  // 判断是按钮点击触发
  else if (event.type === 'click') {
    console.log("触发来源：按钮点击");
    // 你的业务逻辑
  }
}

这里的核心是利用事件对象的type属性（区分是keypress还是click事件），再配合event.key === 'Enter'确认是回车键（比旧的which/keyCode更直观，兼容性也更好）。另外你也可以通过event.target.id直接判断触发元素的ID，比如event.target.id === 'data'或者event.target.id === 'button'，效果是一样的。

另外提一句，你原来代码里的data.onkeypressed = this.event.which === 13有两个问题：一是用了赋值号=而不是判断的===，二是data.onkeypressed不是正确的用法，应该直接通过事件对象来判断哦。

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