我有这个场景，当单击父元素时，它会翻转以显示具有不同颜色的子元素。不幸的是，当用户单击其中一种颜色时，也会触发父级上的“单击”事件。
单击子级时，如何停止父级上的事件触发器？
我想知道可能的解决方案：
CSS ? 单击子级时
将pointer-events : none类附加到父级。但是，这意味着稍后需要清除父pointer-events类。
使用参考？
记录ref父React元素的 ＆ 在单击子元素时，将event.target与 ref进行比较？我不喜欢这个，因为我不喜欢 global ref.
想法和更好的解决方案将不胜感激。问题是：如何在单击子项时停止父项上的事件触发器？
您可以使用 stopPropagation
stopPropagation- 防止当前事件在冒泡阶段进一步传播
var App = React.createClass({
handleParentClick: function (e) {
console.log('parent');
},
handleChildClick: function (e) {
e.stopPropagation();
console.log('child');
},
render: function() {
return <div>
<p onClick={this.handleParentClick}>
<span onClick={this.handleChildClick}>Click</span>
</p>
</div>;
}
});
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>我在 React 中遇到了同样的问题，并使用以下解决方案解决了它：
if(e.currentTarget != e.target ) return;
.......
我想在 props 上调用函数，但同时想停止从子级到父级的事件传播，这是它的处理方式
class LabelCancelable extends Component {
handleChildClick(e) {
e.stopPropagation()
}
closeClicked(e, props) {
e.stopPropagation();
props.onCloseClicked()
}
render() {
const {displayLabel} = this.props;
return (
<span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
<button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
onClick={(e) => this.closeClicked(e, this.props) }>
<span aria-hidden="true">×</span>
</button>
<span className="label-text fs-12">
{ displayLabel }
</span>
</span>
);
}
}
export default LabelCancelable;
另一种解决方案是将以下内容附加到父级上的事件回调：
if(event.target == event.currentTarget){
event.stopPropagation()
....
}
通过这种方式，您可以拦截源自附加 DOM 节点的事件，并且不相关的事件被中继到下一个节点。
我在 Material-UI DataGrid 上遇到了这个问题并使用这个解决了它：
event.defaultMuiPrevented = true;
例如：
<DataGrid
onCellDoubleClick={(params, event) => {
if (!event.ctrlKey) {
event.defaultMuiPrevented = true;
}
}}
{...data}
/>