This answer is for the opposite problem，但是，可以应用相同的解决方案，并让您的事件处理程序检查event.target;如果是子元素，则不执行任何操作。

const btn = document.querySelector(".btn");

btn.addEventListener("click", (e) => {

  if (e.target.tagName === "SPAN") {
    e.preventDefault();
    e.stopPropagation();

    return false;
  }

  console.log("Data", e.target.tagName);

});

.main {
  padding: 100px;
}

.btn {
  border: none;
  height: 60px;
  background-color: #3b82f6;
  border-radius: 0 30px 30px 0;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 40px;
  padding-right: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn>span {
  background-color: white;
  border-radius: 0 100% 100% 0;
  bottom: 0px;
  left: -20px;
  content: "";
  display: block;
  height: 60px;
  cursor: auto;
  position: absolute;
  width: 40px;
}

<div class="main">
  <button class="btn">
  <span></span>
  Submit
 </button>
</div>

CodePen

在我最初的回答中，我说你只需要在你的before元素中添加pointer-events: none;。正如在另一个回答中指出的，这不会有你想要的效果。下面是一个片段，展示了你如何使用clip-path来代替。

工作片段：

body {
  font-family: sans-serif;
  display: grid;
  place-content: center;
  min-height: 100vh;
  gap: 3rem;
}

.btn {
  border: none;
  border-radius: 0 30px 30px 0;
  background-color: #3b82f6;
  color: white;
  cursor: pointer;
  font: inherit;
  height: 60px;
  padding: 5px 20px 5px 40px;
  position: relative;
  overflow: hidden;
  width: 120px;
}

.btn:hover {
  background-color: red;
}

.btn.covered::before {
  aspect-ratio: 1;
  height: 100%;
  position: absolute;
  inset-block: 0;
  left: -30%;
  background-color: yellow;
  border-radius: 50%;
  content: "";
  /* ✨ Add this property ✨ */
  pointer-events: none;
}

.btn.clipped {
  clip-path: path("M120,60H0s15-10,15-30C15,10,0,0,0,0H120V60Z");
}

<button
  class="btn covered"
  type="button"
  onclick="console.log('covered')">
    covered
</button>

<button
  class="btn clipped"
  type="button"
  onclick="console.log('clipped')">
    covered
</button>