select标签绑定的onblur事件未被选中时意外触发问题求助

问题核心是blur事件默认只要元素失去焦点就会触发，原逻辑未做「用户是否主动交互过该元素」的判断，通过新增聚焦标记即可解决，修改后的事件绑定代码如下：

let userIncome = $('#income');
// 交互标记存到元素的data属性中，避免全局变量污染
userIncome.on('focus', function () {
  $(this).data('hasInteracted', true);
});

userIncome.on('blur', function () {
  // 仅当用户主动聚焦过该元素时才执行校验逻辑
  if (!$(this).data('hasInteracted')) return;

  let userVal = $(this).val();
  if (!validateIncome(userVal)) {
    $(this).css({
      'box-shadow': '0px 0px 6px red',
    });
  } else {
    $(this).css({
      'box-shadow': '0px 0px 6px green',
    });
  }
});

如果需要简化代码，也可以把样式赋值逻辑简写为三元表达式形式：

let userIncome = $('#income');
userIncome.on('focus', () => userIncome.data('hasInteracted', true));
userIncome.on('blur', () => {
  if (!userIncome.data('hasInteracted')) return;
  userIncome.css('box-shadow', validateIncome(userIncome.val()) ? '0 0 6px green' : '0 0 6px red');
});

修改后就只会在用户点击选中过select元素、后续移开焦点时才触发验证和样式修改，不会出现点击任意位置就触发校验的问题。

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