是否可以使用 tag that will not launch href?定义onClick元素

问题描述 投票:1回答:2

我有一个可使用<a href>单击的方框元素列表,我想在此方框元素中添加将执行onClick但不会触发<a href>的图标。为了更加精确,我为此使用了React。我将props中的一个函数传递给了用a标签覆盖的子组件。单击特定图标时,我只想启动我传递的功能,而不是转到href。如果您在框中单击其他任何地方,它将触发href

我尝试在图标上添加<a>元素并覆盖原始的<a>,但实际上并没有解决,HTML不允许这样做。现在aonClick一起触发。

这里有一些代码,我将其简化为简单的示例,而不是传递整个内容:

    <a href="https://stackoverflow.com/">
        <div className="content is-relative">
           <p className="stream__title">{this.props.stream.title}</p>
           <p className="stream__game">{this.props.stream.game}</p>
           <FontAwesomeIcon onClick={() => this.props.follow(this.props.stream.user)}
                                                 className="stream__follow" icon="heart" size="lg"/>
        </div>
   </a>

任何想法如何解决此问题?

javascript html reactjs href
2个回答
0
投票
您正面临此问题,因为图标包装在盒子内。在javascript中,事件默认是冒泡的。

即单击图标的事件将冒泡,将由框href处理。

© www.soinside.com 2019 - 2024. All rights reserved.