0

场景:用React实现一个遮罩弹出层的时候,希望点击body(弹出层以外的)能关闭弹出层,但点击弹出层以内的则不关闭并触发里面对应元素内容。

document.querySelector("#root").addEventListener('click',(e)=>{e.stopPropagation();console.log(e.target)})
root是弹出层挂载div

target打印如下:clipboard.png
对应a标签绑定事件:
clipboard.png

结果a标签事件不能被触发,且弹出层内部元素全部点击事件都被屏蔽了,只有删除了stopPropagation才能触发,求解是怎么回事?

Liuyl 41
2019-06-14 提问
1 个回答
2

已采纳

你想阻止弹出层里面的元素冒泡,应该写在里面的元素上,写在handleClick里面。

1

react本身是委托的机制,都会冒泡到document上处理,而且原生事件会比react事件先执行,但是你root上的事件绑定又是原生的,你又阻止了他的冒泡,所以根本就没冒泡到document,可能这就是原因,所以我上面说可以试试用react事件绑定root,如果有样式操作用refs拿到原生Dom。

supreme · 6月15日

展开评论

撰写答案

推广链接