React - 阻止子组件触发父组件的事件
8 浏览
React - 阻止子组件触发父组件的事件
我有这样一个场景，当点击父元素时，它会翻转显示一个带有不同颜色的子元素。不幸的是，当用户点击其中一种颜色时，父元素上的“点击”事件也会被触发。
当子元素被点击时，我该如何停止父元素上的事件触发呢？
我想到了以下可能的解决方案：
- CSS?
当子元素被点击时，向父元素添加一个
pointer-events : none的类。然而，这意味着稍后需要清除父元素上的pointer-events类。 - 使用Ref?
记录父元素的
React元素的ref，并在子元素上点击时将event.target与ref进行比较？我不喜欢这个方法，因为我不喜欢全局ref。
希望能听到您的想法和更好的解决方案。问题是：
当子元素被点击时，我该如何停止父元素上的事件触发？