小程序（html）点击事件穿透答案：CSS3属性,pointer-events. 白色的是一个浮窗，放在透明容器里面，透

当用户点击视图时，如何让当前视图无反应，事件穿透到下一层（z-index小于当前视图的z-index值）视图

答案：CSS3属性,pointer-events.

属性列表

属性	含义
auto	默认值，鼠标或触屏事件不会穿透当前层
none	元素不再是target，监听的元素变成了下层的元素（如果子元素设置成 auto，点击子元素会继续监听事件）

应用场景

白色的是一个浮窗，放在透明容器里面，透明容器盖在红色的视图上面。希望点击透明容器时，事件可以到达红色视图上。

index.wxml
<movable-area class="container">
  <movable-view
    class="move-view"
    direction="{{direction}}"
    x="{{100}}"
    y="{{100}}"
    bindtouchmove="onTouchmove"
    bindtouchend="onTouchend"
    catch:tap="onTap"
    animation="{{animate}}"
    bindchange="onChange"
    style="height:{{100}}rpx; width:{{100}}rpx;"
  >
    <image
      class="background-image"
      src="{{'https://yujiahuitest.oss-cn-hangzhou.aliyuncs.com/soyoung/20042616089519867975893185.jpg?filename=800x800.jpg'}}"
      mode="{{imageMode}}"
      webp="{{webp}}"
      style="height:{{100}}rpx; width:{{100}}rpx;"
      binderror="onImageLoadError"
    />
  </movable-view>
</movable-area>
<view style="width:800rpx;height:800px;background:red;" bind:tap="onBottomTap"></view>

index.wxss
.container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1500;
  
  pointer-events: none;

}

.move-view {
  position: absolute;
  pointer-events: auto;
  /* right: 20px;
  bottom: 140px; */
  /* min-width: rpx(100);
  min-height: rpx(100);
  max-width: rpx(280);
  max-height: rpx(600);
  background: red; */

}

.background-image {
  /* min-width: rpx(100);
  min-height: rpx(100);
  max-width: rpx(280);
  max-height: rpx(600); */
}

index.js
onTap() {
    console.log('点击------------');
    
  },
  onBottomTap() {
    console.log('点击底部------------');
  }