整个 div 是可点击的。 div在角落有一个图标，我希望div在点击这个图标时不被点击答案

【问题标题】：Entire div is clickable. The div has an icon in the corner, and I want the div to not be clicked when clicking this icon整个 div 是可点击的。 div在角落有一个图标，我希望div在点击这个图标时不被点击
【发布时间】：2020-12-22 00:19:18
【问题描述】：

上图中的所有内容都在 React-Router Link 标签内。单击任何灰色区域会将用户带到包含有关“洋葱”的更多信息的页面。 heart 是一个字体很棒的 i 标签，它有一个 onClick 处理程序，可以将点击的配方添加到用户的收藏夹中。点击它确实成功收藏了帖子，但它也会触发底层链接，将用户带到更多详细信息页面。

如何在不单击附加到底层 div 的链接的情况下单击心脏？

注意：灰色框是 className="recipecard-content-FEED" 的元素。其他注释在下面的代码中注释。

这个 div 的 JSX 代码：

<Link to={{pathname: `/recipe/${recipe.id}`, component: 'Feed'}}>
    <div className="recipecard-content-FEED" }> // This is the gray box

        <div className="recipe-title-FEED-container">
            <h1 className="recipe-title-FEED">{recipe.title}</h1> // This is 'onion'
            {this.renderAddOrRemoveFavorite(recipe)} // This renders the heart
        </div>

        <p className="recipe-author-FEED"></p> // This is 'bammbi'

        <h2 className="recipe-cooktime-FEED">{recipe.cooktime}</h2> // This is '20'

    </div>
</Link>

心脏：

<div className="favorite_btn" onClick={() => this.addFavorite(this.props.auth.user.id, recipe.id)}>
    <i className="far fa-heart"></i>
</div>

【问题讨论】：

标签： html css react-router

【解决方案1】：

有两种方法可以解决这个问题。

在心脏上添加点击事件，并在添加到收藏夹后防止默认。
使用点击事件删除链接路由器和路由。并使用 ID 跟踪目标。

如果'id;目标元素的核心然后忽略路由，否则将其路由到详细信息页面。

【讨论】：

【解决方案2】：

您可以在图标上添加onClick 函数以防止链接通过，然后在单击图标后指定您希望发生的事情。

const handleClick = (e) => {
  e.preventDefault();

  // handle click behavior here
}

<i className="far fa-heart" onClick={handleClick} />

【讨论】：

我添加了一个 onClick。更新了我的原始帖子以显示新代码。我将它添加到外部 div 中，因为 font-awesome 建议保持其图标不变并向父容器添加附加功能。不幸的是，它仍然触发了底层链接。
你的函数需要接受事件对象并在this.addFavorite之前调用preventDefault来停止触发链接。

【解决方案3】：

有点乱的解决方案：

我可以将其中的每个单独的项目都设置为链接，而不是将整个灰色容器设置为链接。这样，心脏按预期工作，单击其他链接旁边框上的任意位置仍会将您带到更多详细信息页面。

        <div className="recipecard-content-FEED" style={ this.getRecipePicture(recipe) }>

            <div className="recipe-title-FEED-container">
              <Link to={{pathname: `/recipe/${recipe.id}`, component: 'Feed'}}>
                <div className="recipe-title-FEED">
                  <h1>{recipe.title}</h1>
                </div>
              </Link>
              {this.renderAddOrRemoveFavorite(recipe)}
            </div>

            <Link to={{pathname: `/recipe/${recipe.id}`, component: 'Feed'}}>
              <p className="recipe-author-FEED">
                <Link style={{textDecoration: 'underline', color: 'rgb(230, 220, 200)'}} to={`/profile/${recipe.author}`}>
                  {recipe.username}
                </Link>
              </p>
            </Link>

            <Link to={{pathname: `/recipe/${recipe.id}`, component: 'Feed'}}>
              <h2 className="recipe-cooktime-FEED">{recipe.cooktime}</h2>
            </Link>
       </div>

【讨论】：