如何实现点击按钮或按下ESC键隐藏<a>标签？代码问题求助

先指出你原代码中的几个问题：

• 重复绑定window.onkeyup，后面的事件处理函数会覆盖前面的
• 条件判断语法错误：if (event.keyCode == 27) && hidden = "true" 写法错误，需将所有判断条件放在if括号内，且判断相等要用==/===，不是赋值符号=
• visibility属性的有效值是visible或hidden，不是block
• 变量未用let/const声明，会污染全局作用域
• 核心需求是隐藏标签，但原代码操作的是外层div，不符合需求

完整代码示例 #

HTML部分 #

<!-- 外层容器 -->
<center>
  <div style="width: 100%;position: fixed;background: white;display: flex;justify-content: center;align-items: center;text-align: center;overflow: hidden;">
    <!-- 给a标签添加id，方便JavaScript选择操作 -->
    <a id="homeLink" href="home">
      <img src="https://www.freeiconspng.com/thumbs/homepage-icon-png/house-icon-png-white-32.png" width="35px" height="35px">
    </a>
  </div>
</center>
<!-- 用于触发隐藏的按钮 -->
<button id="hideBtn">隐藏首页链接</button>

JavaScript部分 #

// 获取需要操作的元素
const homeLink = document.getElementById('homeLink');
const hideBtn = document.getElementById('hideBtn');

// 定义复用的隐藏函数
function hideLink() {
  // 用display:none完全隐藏元素（不保留占位），若要保留位置可改用visibility:hidden
  homeLink.style.display = 'none';
}

// 绑定按钮点击事件
hideBtn.addEventListener('click', hideLink);

// 绑定ESC键抬起事件
window.addEventListener('keyup', function(event) {
  // 同时兼容keyCode和event.key两种写法，提升兼容性
  if (event.key === 'Escape' || event.keyCode === 27) {
    hideLink();
  }
});

可选扩展：切换显示/隐藏 #

如果需要支持点击按钮或按ESC键切换标签的显示/隐藏状态，可修改隐藏函数为：

function toggleLinkVisibility() {
  if (homeLink.style.display === 'none') {
    homeLink.style.display = 'inline';
  } else {
    homeLink.style.display = 'none';
  }
}

之后将按钮点击和ESC事件的处理函数替换为toggleLinkVisibility即可。

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