JavaScript中取消按钮无法关闭覆盖菜单的问题排查

问题原因 #

• 取消按钮svgCancel嵌套在menu（原<a>标签）内部，点击时事件会冒泡到父元素menu的click事件，导致关闭逻辑执行后立刻触发打开逻辑，视觉上按钮无反应。
• 尝试touchstart和onclick属性无效：前者未解决冒泡核心问题；后者大概率是函数不在全局作用域，导致控制台提示"函数未定义"。

解决方案 #

两种可行方案，推荐第二种（更符合Web语义化）：

方案一：阻止取消按钮的事件冒泡 #

在svgCancel的click事件处理函数中添加event.stopPropagation()，阻止事件向上传递到父元素menu：

const menu = document.getElementById('menu');
const svgham = document.getElementById('svgham');
const svgCancel = document.getElementById('svgCancel');
const overlay = document.getElementById('overlay');

menu.addEventListener("click", () => {
  overlay.style.display = "flex";
  svgham.style.display = "none";
  svgCancel.style.display = "flex";
});

svgCancel.addEventListener("click", (e) => {
  // 阻止事件冒泡，避免触发父元素menu的click事件
  e.stopPropagation();
  overlay.style.display = "none";
  svgCancel.style.display = "none";
  svgham.style.display = "flex";
});

overlay.addEventListener("click", () => {
  overlay.style.display = "none";
  svgCancel.style.display = "none";
  svgham.style.display = "flex";
});

方案二：将menu的标签改为标签 #

此处menu是按钮功能而非跳转链接，用<button>更符合语义化，同时避免a标签默认行为的潜在干扰，配合阻止冒泡逻辑：

修改后的HTML

<nav>
  <button id="menu">
    <svg id="svgham" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor" /><path d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z" fill="currentColor" /><path d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z" fill="currentColor" /></svg>

    <svg version="1.1" id="svgCancel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" style="enable-background:new 0 0 24 24;" xml:space="preserve"><line style="fill:none;stroke:#000000;stroke-width:2.5;stroke-miterlimit:10;" x1="0" y1="0" x2="18" y2="18"/><line style="fill:none;stroke:#000000;stroke-width:2.5;stroke-miterlimit:10;" x1="0" y1="18" x2="18" y2="0"/></svg>
  </button>
</nav>
<main>
  <div id="overlay">
    <a>a</a>
    <a>b</a>
    <a>c</a>
    <a>d</a>
  </div>
</main>

补充CSS（优化button默认样式）

#menu {
  margin: 0;
  border: 0;
  text-align: right;
  background-color: transparent;
  padding: 0; /* 移除默认内边距 */
  cursor: pointer; /* 添加鼠标指针样式 */
}

JS代码（同方案一，保留阻止冒泡逻辑）

const menu = document.getElementById('menu');
const svgham = document.getElementById('svgham');
const svgCancel = document.getElementById('svgCancel');
const overlay = document.getElementById('overlay');

menu.addEventListener("click", () => {
  overlay.style.display = "flex";
  svgham.style.display = "none";
  svgCancel.style.display = "flex";
});

svgCancel.addEventListener("click", (e) => {
  e.stopPropagation();
  overlay.style.display = "none";
  svgCancel.style.display = "none";
  svgham.style.display = "flex";
});

overlay.addEventListener("click", () => {
  overlay.style.display = "none";
  svgCancel.style.display = "none";
  svgham.style.display = "flex";
});

说明 #

• 方案一改动最小，仅需修改JS代码；
• 方案二更符合HTML语义化规范，减少不必要的标签行为干扰，适合长期维护。

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