Css 路由器链接中的按钮？

假设我有一个具有以下结构的元素：

<Link to={`/games/${game.id}`}>
  <GameInfo/>
  <CustomButton/>
</Link>

但这并不理想，因为我仍然希望按钮周围的区域是链接的一部分（所以悬停，链接本身在下面显示的区域中工作）

---

z-index

是唯一的解决方案吗？

您可以使用preventDefault和stopPropagation来实现此内部按钮，如下所示单击使用

<Link to="/game">
      <div>
      
        <button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
           //function to do your stuff
          }}
        >
         Click Me
        </button>
      </div>
    </Link>

{
e、 预防默认值（）；
e、 停止传播（）；
//功能来做你的事情
}}
>
点击我

你可以在这里查看演示

---

您是否尝试过在按钮的

onClick

处理程序中阻止默认事件操作并停止事件传播？我不熟悉传播，它似乎是关键。在阅读了一些相关内容后，我尝试将

event.preventDefault（）

和

event.stopPropagation（）

添加到click处理程序函数中，但它似乎没有任何作用。编辑：我刚刚注意到我得到了一个未定义的

无法读取属性'stopPropagation'的错误，让我检查一下。你能在一个运行的codesandbox中创建一个简单的可复制的演示程序来复制这个问题，我们可以在其中进行检查和实时调试吗？有事件传播，但z-index可能起作用，覆盖层也会影响正在单击的“表面”，等等。解决它，将
事件传递给内部按钮单击处理程序，而不是自定义按钮组件单击处理程序使其工作。非常感谢。
<Link to="/game">
      <div>
      
        <button
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
           //function to do your stuff
          }}
        >
         Click Me
        </button>
      </div>
    </Link>