我知道事件冒泡和event.stopPropagation()
的工作原理,但是我正在寻找一种避免在DOM节点的所有子元素上使用点击处理程序的方法。
<div onclick="console.log('LOG ME')">
<div onclick="console.log('DO NOT LOG ME')">Click me</div>
</div>
我希望记录“LOG ME”,但不记录“DO NOT LOG ME”。
我发现使用
pointer-events:none
的CSS方法可以解决问题,但是会使所有子div上的:hover和:focus CSS样式消失。你有什么想法吗?
编辑:一些背景信息。我正在使用React。外部div是一个HOC,内部div是一个可见组件。我希望HOC捕获子组件的所有点击事件,并停止传播到子组件。在React中可以这样做:
const HOC = ChildComponent => class extends Component {
handleClick = event => { /* Do what with event? */ }
render() {
return <div onClick={this.handleClick}>
<ChildComponent />
</div>;
}
}
其中ChildComponent
是一个可点击组件。