悬浮按钮组的不可点击间隙

152 阅读1分钟

更新

原来把容器设置为 pointer-events:none就可以了

原文

在地图上添加悬浮的按钮组后,我发现按钮的间隙无法点击和拖拽地图,具体情况类似于这个:

0401ebf5427026773865f989c3a37ab4d50be9eac178962506e38f41ada5abddQzpcVXNlcnNcMTk3NDJcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDE2MTI0NjIwNDlfdjJcSW1hZ2VGaWxlc1wxNzE5OTcwMDA1MjUxXzREQkQ3RkZELTA1Q0MtNDVjMi1CMkRDLUU3MDAwMDc0Qjg0MS5wbmc=.png 原因是按钮组的容器阻拦了对于地图的点击事件。 解决方法是将容器高度置为0且允许内部元素溢出。额外添加的样式如下

<span style={{ height: 0, overflowY:'visible' }}>
    {/* 按钮组 */}
</span>

再调整按钮组定位,效果如下 0a26627af5c30fe79c2dc2226359841323077642d771e5c866eca51eb81bb0cfQzpcVXNlcnNcMTk3NDJcQXBwRGF0YVxSb2FtaW5nXERpbmdUYWxrXDE2MTI0NjIwNDlfdjJcSW1hZ2VGaWxlc1wxNzE5OTcwNzEzODk5XzM3ODQzOTkzLTYyRkUtNGMyMy1CRUM3LURDQUYwQTM2MTZFMi5wbmc=.png 可以看到,按钮间隙不再有容器阻挡点击。
如果容器子元素需要纵向布局,应当改为将设置宽度为0。但不应将容器的宽、高同时设置为0,这样会导致子元素布局失去控制。