我有一个场景,当父元素被点击时,它会翻转并展示一个不同颜色的子元素。但不幸的是,当用户单击其中一种颜色时,也会触发父元素的“单击”事件。
如何在单击子元素时停止触发父元素上的事件?
我在思考可能的解决方案:
CSS?
在单击子元素时将pointer-events: none
类添加到父元素。然而,这意味着稍后需要清除父元素的pointer-events
类。使用 Ref?
记录父React
元素的ref
,并在单击子元素时将event.target
与引用进行比较?我不喜欢这个方法,因为我不喜欢全局ref
。
希望能提供更好的思路和解决方案。问题是: 如何在单击子元素时停止触发父元素上的事件?