如何使onfocusin事件仅响应input元素，忽略button元素？

嘿，我懂你遇到的这个问题！onfocusin是个会冒泡的事件，所以当你点击button按钮时，焦点落到button上，事件会顺着DOM树向上冒泡到form元素，触发你绑定的处理函数。咱们有几个简单的办法可以让JS忽略button的onfocusin事件：

方法1：在事件处理函数中判断目标元素 #

把原来的内联事件改成带event参数的函数，在函数里检查触发事件的目标元素是不是button，如果是就直接返回，不执行后续逻辑：

<form onfocusin="handleFocusIn(event)">
  <input placeholder="name"/><br>
  <input placeholder="age"/><br>
  <input placeholder="full name"/><br>
  <button type="button">Send!</button>
</form>

<script>
function handleFocusIn(event) {
  // 检查目标元素是否为button，是的话跳过逻辑
  if (event.target.tagName === 'BUTTON') {
    return;
  }
  console.log('Input received Focus');
}
</script>

这里event.target指向实际触发事件的DOM元素，DOM元素的tagName属性是大写的，所以我们判断是否等于'BUTTON'。如果你想更精准，也可以判断按钮的类型：event.target.type === 'button'，这样能区分开其他类型的button（比如submit类型）。

方法2：阻止button的事件冒泡 #

直接给button元素绑定onfocusin事件，调用event.stopPropagation()阻止事件向上冒泡到form，这样form的onfocusin就不会被触发了：

<form onfocusin="console.log('Input received Focus')">
  <input placeholder="name"/><br>
  <input placeholder="age"/><br>
  <input placeholder="full name"/><br>
  <button type="button" onfocusin="event.stopPropagation()">Send!</button>
</form>

这个方法简单直接，适合只需要针对单个button处理的场景。

方法3：使用事件委托（更推荐的解耦方式） #

把HTML和JS代码分离，用addEventListener给form绑定事件，然后判断目标元素是不是input——只有input获得焦点时才执行逻辑：

<form id="userForm">
  <input placeholder="name"/><br>
  <input placeholder="age"/><br>
  <input placeholder="full name"/><br>
  <button type="button">Send!</button>
</form>

<script>
document.getElementById('userForm').addEventListener('focusin', function(event) {
  // 只有当目标是input元素时才执行逻辑
  if (event.target.tagName !== 'INPUT') {
    return;
  }
  console.log('Input received Focus');
});
</script>

这种方式更符合现代前端的代码规范，把事件处理逻辑集中在JS里，后期维护起来更方便。

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