小程序movable-area置于顶层遮盖下方元素无法操作的解决方案

小程序项目中有个需求，右下角按钮可以在页面中随意拖动，此时查看文档找到了一个自带的标签可以实现此功能，代码如下

<movable-area>
      <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
</movable-area>

但是使用之后有个问题，

movable-area充满整个页面，置于所有元素顶层导致下方的所有元素无法操作，查询资料得知可以给这两个标签增加两个样式即可

movable-view {
   pointer-events: auto;
}
movable-area {
  pointer-events: none;
}

pointer-events: none;表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西

pointer-events:auto;鼠标不会穿透当前层

转载于:https://www.cnblogs.com/bing0709/p/10636517.html