问题描述： 使用uniapp 提供的 movable-view 实现元素拖拽。比如首页添加上报按钮，为了用户操作方便添加拖拽功能。由于外层需要套一个可移动范围的父元素。这个时候父元素就会遮挡住原页面，影响原页面的点击以及滚动事件。
<movable-area class="report-box">
<movable-view class="report-content" inertia :x="x" :y="y" direction="all" @change="onChange">
<view
class="btn-report"
@click="clickBtnReport"
@touchstart="onTouchmove"
@touchend="onTouchend"
title="上报"
></view>
</movable-view>
</movable-area>
解决方案：
由于我们的父元素其实只是单纯的为了划分拖拽元素的可拖拽范围，本身并没有其他的事件需要处理，所以可以直接穿透父元素的鼠标事件。
CSS 提供了一个 pointer-events 的属性来设置在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
其值有很多， 包括 "auto"(默认值)，"none", "visiblePainted", "visibleFill" 等。
其中设置为 "none" 时，元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
所以我们重点来了，我们可以给父元素设置为 "none", 让鼠标事件穿透下去；给拖拽元素设置"auto",继续响应事件，点击、拖拽等。
.report-box {
pointer-events: none; // 划重点-注意值
position: fixed;
top: 0;
left: 0;
width: calc(100% - 48px);
height: calc(100% - 92px);
z-index: 99;
}
.report-content {
pointer-events: auto; // 划重点-注意值
}
这样设置完后，不会影响其他元素的任何事件，滚动、点击、滑动都不影响。（亲测有效）
