更新
原来把容器设置为 pointer-events:none就可以了
原文
在地图上添加悬浮的按钮组后,我发现按钮的间隙无法点击和拖拽地图,具体情况类似于这个:
原因是按钮组的容器阻拦了对于地图的点击事件。
解决方法是将容器高度置为0且允许内部元素溢出。额外添加的样式如下
<span style={{ height: 0, overflowY:'visible' }}>
{/* 按钮组 */}
</span>
再调整按钮组定位,效果如下
可以看到,按钮间隙不再有容器阻挡点击。
如果容器子元素需要纵向布局,应当改为将设置宽度为0。但不应将容器的宽、高同时设置为0,这样会导致子元素布局失去控制。