jQuery中Alt键keydown事件仅触发一次的问题求助

你碰到的这个情况确实是Chrome浏览器的特殊行为导致的——当按下Alt键时，Chrome会自动激活顶部的浏览器菜单栏，这会让页面文档失去焦点，后续的keydown事件就无法被正确捕获了，直到你点击页面重新拿回焦点才会恢复。而其他按键（比如i键）不会触发浏览器的默认菜单栏行为，所以没有这个问题。

这里给你调整后的代码，既能解决重复按Alt键无响应的问题，还能优化图标添加/移除的逻辑：

jQuery(document).ready(function ($) {
  let keyDown = false;
  const INFO_ICON_CLASS = 'info-icon-container';

  $(document).on("keydown", function (e) {
    // 仅处理未激活状态下的Alt键按下
    if (e.key === "Alt" && !keyDown) {
      // 阻止Chrome激活菜单栏的默认行为
      e.preventDefault();
      $('.info').each(function () {
        // 仅在当前元素未添加过图标时才添加
        if (!$(this).next(`.${INFO_ICON_CLASS}`).length) {
          $(this).after(`<a class="${INFO_ICON_CLASS}" style="color:black;position:absolute;"><i class="fas fa-info-circle"></i></a>`);
        }
      });
      keyDown = true;
    }
  });

  $(document).on("keyup", function (e) {
    if (e.key === "Alt") {
      // 只移除我们动态添加的图标容器
      $(`.${INFO_ICON_CLASS}`).remove();
      keyDown = false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 记得引入Font Awesome样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<p class="info">Test</p>

关键修改点说明 #

• 阻止默认行为：添加e.preventDefault()可以避免Chrome触发菜单栏激活，让页面始终保持焦点，确保keydown事件能持续被捕获
• 专属类标记图标：给动态添加的图标容器加上info-icon-container类，这样移除时只会操作我们添加的元素，不会误删页面上其他原本存在的fa-info-circle图标
• 重复添加判断：在添加前检查当前.info元素后是否已经有图标容器，避免重复添加多个图标
• 修正拼写错误：把原代码里的postion:absolute修正为正确的position:absolute

这样调整后，你重复按下Alt键时就能正常显示/隐藏图标了，不用再点击页面恢复功能。

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