如何防止触发父事件 [英] How can I prevent parent events from being triggered

问题描述

我在Reaction中经常遇到一个模式，但我似乎找不出解决它的最佳方法是什么。

给出以下基本代码示例：

<Card onClick={this.toggleCollapsedModules}>
     <CardBody>
        <Row className="align-items-center">
             <Col xl={2} lg={3}>
                <h1>Test</h1>
             </Col>
             <Col xl={9} lg={9}>
                <h1>Description</h1>
             </Col>
             <Col lg={1} sm={12} xs={12}>
                <div className="float-right mr-3">
                    <Info
                       onClick={this.togglePricingModal}
                       className="icon-lg"
                       style={{ cursor: 'pointer' }}>
                    </Info>
                </div>
             </Col>
           </Row>
    </CardBody>
</Card>

如果我单击<Card>元素的任何位置，toggleCollapsedModules就会被触发，它会打开卡片以显示下面的更多信息。问题是图标中切换模式的操作也触发了父toggleCollapsedModules，这是正常的，因为图标是<Card>层次结构的一部分。

如果且仅当我单击图标本身时，如何才能阻止父级切换？

这是没有任何触发器的基本视图。

这是单击图标的时候(您可以看到模式被打开，但父单击事件也被触发，因此卡片现在也被展开)

我想了几个明显的解决方法.

1-为用户提供一个按钮，用户可以在该按钮上单击展开卡，而不是单击卡上的任何位置。(不符合要求)

2-使前11个Col空格为单击事件，而不是整个12个。(非常好，但如果您单击图标之外的卡片右侧，则不会展开令人讨厌的卡片)

3-使用Click事件的参数调用preventDefault，就像我在JS/JQuery环境中所做的那样，但它仍然会触发整个事件。

4-使用本地状态存储我当前是否正在单击图标，如果是，则防止它折叠卡片。(这不是绕过这个问题的黑客攻击吗？)

.但他们似乎都绕过了我的真正问题，必须有不同的方法来解决它。

有什么线索吗？我觉得我在我的反应理解中遗漏了一些东西，因为这是我们必须经常遇到的东西。

推荐答案

如果要停止事件冒泡，可以使用e.stopPropagation()方法代替e.preventDefault()或与e.preventDefault()一起使用。

这篇关于如何防止触发父事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！