JavaScript菜单点击内部元素意外关闭的问题求助

我帮你找到了问题的根源和解决方法，一起来看看：

问题原因 #

你的CSS里给.circle-inner设置了pointer-events: none;，这个属性会让元素“忽略”点击事件——点击它的时候事件会直接穿透到下方的元素。而内部的<a>、<h1>等元素都继承了这个属性，所以当你点击这些链接时，浏览器不会把它们识别为circle的子元素，导致!circle.contains(e.target)这个条件成立，意外触发了菜单关闭的逻辑。

解决方法 #

只需要修改CSS，恢复内部可点击元素的点击事件捕获能力，两种方法任选其一即可：

方法一：给.circle-inner整体开启点击事件

把CSS里的.circle-inner规则中的pointer-events: none;改成pointer-events: auto;：

.circle-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  pointer-events: auto; /* 替换原来的none */
}

方法二：仅给可点击的<a>标签开启点击事件

如果你不想让.circle-inner整体接收点击，也可以单独给<a>标签设置：

.circle-inner a {
  text-decoration: none;
  color: inherit;
  pointer-events: auto; /* 新增这一行 */
}

修改后的效果 #

调整后点击菜单内部的<a>标签时，e.target会正确指向<a>元素，circle.contains(e.target)会返回true，不会触发关闭菜单的逻辑；而点击菜单外部区域时，菜单依然会正常关闭，完全符合你的需求~

备注：内容来源于stack exchange，提问作者ImaginePain