UniApp/Vue中父元素Pointer-Events: None时让子元素点击生效的方法

在UniApp和Vue开发中，我们有时会遇到这样的需求：给父元素设置了pointer-events: none样式后，希望子元素的点击事件仍然能够生效。这在一些特定的交互场景中非常有用，比如创建一个不可点击的遮罩层，但其中的某些按钮或链接需要可以被用户操作。下面就来介绍几种实现的方法。

方法一：使用CSS的pointer-events属性

虽然给父元素设置了pointer-events: none，但我们可以给子元素重新设置pointer-events: auto。这样，子元素就可以响应点击事件了。例如：

<template>
  <div class="parent" @click="parentClick">
    <div class="child" @click="childClick">点击我</div>
  </div>
</template>

<style>
.parent {
  pointer-events: none;
}
.child {
  pointer-events: auto;
}
</style>

方法二：通过JavaScript动态设置pointer-events属性

如果需要根据某些条件来控制子元素的点击事件是否生效，可以在Vue的生命周期函数或事件处理函数中，使用JavaScript动态地修改子元素的pointer-events属性。例如：

<template>
  <div class="parent" @click="parentClick">
    <div class="child" ref="child" @click="childClick">点击我</div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.child.style.pointerEvents = 'auto';
  },
  methods: {
    parentClick() {
      console.log('父元素点击');
    },
    childClick() {
      console.log('子元素点击');
    }
  }
};
</script>

方法三：改变DOM结构

如果以上方法都不适合你的场景，还可以考虑改变DOM结构，将子元素移出父元素的层级，或者使用其他方式来实现类似的效果，从而避免pointer-events: none对点击事件的影响。

在UniApp和Vue开发中，当父元素设置了pointer-events: none时，我们可以通过多种方法让子元素的点击事件生效，具体使用哪种方法，可以根据实际需求和项目情况来选择。