如何判断select标签focus事件的触发源：点击还是Tab键？

这个需求完全可以实现，核心思路是通过提前监听鼠标点击或Tab按键事件，给select元素添加状态标记，再在focus事件中根据标记判断触发来源。

具体实现步骤： #

• 给目标select元素绑定mousedown事件：当用户点击select时，设置一个自定义属性（比如data-trigger）为click。
• 给document绑定keydown事件：监听Tab键，当Tab键按下且焦点即将移向目标select时，设置其自定义属性为tab。
• 在select的focus事件中，读取自定义属性的值判断触发来源，之后清除标记避免影响下一次判断。

示例代码： #

const selectEl = document.querySelector('select');

// 标记点击触发
selectEl.addEventListener('mousedown', () => {
  selectEl.dataset.trigger = 'click';
});

// 标记Tab触发
document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    const currentFocusEl = document.activeElement;
    // 判断焦点是否会切换到目标select
    const willFocusSelect = currentFocusEl?.nextElementSibling === selectEl 
      || currentFocusEl?.previousElementSibling === selectEl;
    if (willFocusSelect) {
      selectEl.dataset.trigger = 'tab';
    }
  }
});

// 在focus事件中判断来源
selectEl.addEventListener('focus', () => {
  const trigger = selectEl.dataset.trigger;
  if (trigger === 'click') {
    console.log('focus由点击触发');
  } else if (trigger === 'tab') {
    console.log('focus由Tab切换触发');
  }
  // 清除标记，避免状态污染
  delete selectEl.dataset.trigger;
});

注意事项： #

• 用mousedown而非click标记点击：因为mousedown会在focus事件之前触发，能确保标记在focus触发前已设置。
• Tab键监听需要预判焦点走向：keydown事件发生在焦点切换前，所以通过当前焦点元素的前后节点判断是否会移向目标select，保证标记准确。
• 务必清除标记：每次focus事件处理完后删除自定义属性，避免后续触发时使用旧标记。

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