本文介绍了如何防止触发父事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在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环境中所做的那样，但它仍然会触发整个事件。
.但他们似乎都绕过了我的真正问题，必须有不同的方法来解决它。
有什么线索吗？我觉得我在我的反应理解中遗漏了一些东西，因为这是我们必须经常遇到的东西。
推荐答案
如果要停止事件冒泡，可以使用e.stopPropagation()方法代替e.preventDefault()或与e.preventDefault()一起使用。
这篇关于如何防止触发父事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！