stopPropogation阻止了子元素的事件触发

Question

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

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

target打印如下：
对应a标签绑定事件：

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

Answer 1

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