<a> 标签内的可点击元素答案

【问题标题】：Clickable element inside <a> tag<a> 标签内的可点击元素
【发布时间】：2022-07-20 22:13:59
【问题描述】：

我正在开发一个 React 应用程序。

我有一张卡片，上面有图片、标题和一个按钮。

这是一个简化版：

<a href="www.example.com" class="card">
    <div class="image-wrapper">
        <div class="image">...</div>
        <div class="cta-button" onClick={handleOnClick}>cta</div>
    </div>
    <div class="title">title</div>
</a>

cta-button 使用position: absolute 放置在image-wrapper 的右下角。

当我点击cta-button 时，如何防止访问handleOnClick 中的card 链接？

【问题讨论】：

为什么要在链接中放置一个“按钮”？
一个<a>首先不应该真正包含一个按钮，你也许可以解决它，但为什么不只是将图像包装在链接中呢？（如果需要，可能还有标题）

标签： javascript reactjs

【解决方案1】：

您可以阻止 clickEvent 的传播

onClick={(e) => {
  e.stopPropagation();
  handleOnClick(e);
}}

【讨论】：

【解决方案2】：

您可以像这样使用 JavaScript 函数：

function handleOnClick(event){

event.preventDefault();

};

这应该会阻止它。

【讨论】：