您可以禁用内容div的click事件

const content = document.querySelector('.content');
content.off('click');

在函数的参数中访问事件目标。从那里使用条件if语句来确保单击的目标是覆盖，并且仅在条件为真时执行操作。
第一个

@PsiKai解决方案不错，你也可以用closest来处理（并且用一个事件监听器来代替onclick：
第一个

只要重新构造你的HTML代码，它就会工作得很好，因为你已经为覆盖层和内容设置了z-index。所以内容的z-index比覆盖层高，所以它会被内容隐藏起来。

示范：

第一个

要解决这个问题，你需要了解javascript事件是如何工作的。事件有三个阶段：
1.捕获阶段
1.目标阶段
1.鼓泡阶段
捕获阶段：
当你触发某个事件时，javascript会从最顶层的元素（Window）传递到子元素来处理它。直到到达目标（.content）元素为止。在你的例子中，事件会经过.overlay元素，但事件处理程序不会被触发，因为默认情况下，所有的事件监听器都会在bubbling or target阶段触发
目标阶段：
事件已到达事件的目标。触发元素的元素，在本例中为.content
鼓泡阶段：
事件会以相反的顺序透过目的的上阶向上传播，从父系开始，最后到达包含的Window。在此阶段，您的事件会透过.overlay元素，并叫用已注册的事件行程常式。

我不知道什么是您的问题的最佳解决方案，但它可以通过几种方式解决：
1.由@PsiKai和@Joulss提出的解决方案，您可以通过类名检查目标元素。已注册的事件侦听器
1.@eMentorship提出的解决方案，通过改变标记，使冒泡阶段的事件不触及.overlay元素。

const content = document.querySelector('.element');
content.addEventListener('click', event => event.stopPropagation());

通过调用stopPropagation，可以阻止事件转到父元素，因此.overlay事件处理程序被忽略，因为事件未冒泡到根元素。
事件阶段：https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
PS.根据MDN：建议使用addEventListener()方法注册事件监听器。其优点如下：

• 它允许为一个事件添加多个处理程序。

一种需要与其他库或
扩展名。

• 与使用onXYZ属性相比，它可以在激活侦听器（捕获与冒泡）时更精细地控制阶段。
• 它适用于任何事件目标，而不仅仅是HTML或SVG元素。

我遇到了同样的问题，通过不在覆盖层div中包含内容div解决了这个问题：
例如，取代：

<div class="overlay">
  <div class="content">Hello World</div>
</div>

已执行此操作：

<div class="overlay"></div>
<div class="content">Hello World</div>