直接上代码吧,我是想了半天不知道哪里出问题了。 state = { spread: false } componentDidMount() { console.log('document clicked') document.onclick = () => { if(this.state.spread) { this.setState({ spread: false }) } } } spreadHandler (e) { console.log('target clicked') // 这个事件绑定在一个 a 标签上 e.stopPropagation() this.setState({ spread: !this.state.spread }) }这个功能就是一个类似淘宝顶部导航条的功能,只不过我这里用的是点击事件。现在我触发spreadHandler的时候取消了冒泡,但是document的click事件还是会触发。不知道是因为事件绑定在 a 标签上,还是别的什么原因造成的,有人知道这是怎么回事吗?
1 回答

函数式编程
TA贡献1807条经验 获得超9个赞
react 的合成事件中的阻止冒泡, 是无法取消原生事件冒泡的.
原生事件中阻止冒泡行为, 反而可以阻止 react 合成事件中的冒泡.
所以应该尽量避免混用, 非用不可的话, 可以在 document 的事件处理程序中加一层判断.
document.addEventListener('click', function(e){
// 类似事件委托, 判断一下发生事件的元素.
if( e.target.nodeName.toLowerCase() === 'a' ) {
return;
}
}, false);
添加回答
举报
0/150
提交
取消