点击Show按钮时如何让InfoBox保持显示且无闪烁？

问题根源在于事件触发顺序：点击show按钮时，输入框会先触发blur事件隐藏info，紧接着按钮的click事件又调用show()，导致info先隐后显，出现闪烁。

修改后的jQuery代码 #

$(function() {
  
  const username = $('.username');
  const showPwd = $('.show-pwd');
  const infoBox = $('.info');

  showPwd.click(() => {
    username.get(0).type = 'password';
    infoBox.show();
  });

  username.on("focus", (e) => {
    infoBox.show();
  });

  username.on("blur", (e) => {
    // 延迟检查焦点位置，避免按钮点击时的闪烁
    setTimeout(() => {
      // 如果焦点不在show按钮上，才隐藏info
      if (!showPwd.is(':focus')) {
        infoBox.hide();
      }
    }, 10);
  });
});

改动说明 #

• 给blur事件的隐藏逻辑加了10毫秒延迟，确保按钮的click事件执行完毕后再判断焦点位置。
• 若焦点落在show按钮上，说明用户是点击按钮切换输入类型，此时不隐藏info；只有当焦点转移到其他区域时，才隐藏info，彻底避免闪烁问题。

你也可以用document.activeElement替代:focus选择器，效果一致：

username.on("blur", (e) => {
  setTimeout(() => {
    if (document.activeElement !== showPwd[0]) {
      infoBox.hide();
    }
  }, 10);
});

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