如何在可点击的div中制作不可点击的图标？ [关闭]

【问题标题】：How to make unclickable icon inside clickable div? [closed]如何在可点击的div中制作不可点击的图标？ [关闭]
【发布时间】：2021-07-02 02:13:48
【问题描述】：

我有一个可点击的 div 行。每行里面都有一个图标。

<div className="row" ....>
<icon className="filter".../>
</div>

我尝试在图标上使用pointer-events: none;。但它没有工作

当整个 div 可点击时，如何使这些图标不可点击？

【问题讨论】：

【解决方案1】：

您的图标位于div 内，因此icon 是可点击的。

所以尝试将它们并排放置以使icon 不可点击：

div {
    display: flex;
}

div > div {
   background: orange;
   cursor: pointer;
}

div > icon {
   cursor: default;
}

<div>
    <div className="row">
      1234567
    </div>
    <icon className="filter">2</icon>
</div>

【讨论】：

但必须是每一行
@Dave 你是对的。您的图标放置在 div 中。这就是当您将鼠标悬停在div 上时图标具有可点击光标的原因。因此，您可以编辑 HTML 以获得所需的结果。