1.定义

给元素设定后，它会忽略所有的指针事件(点击，hover，active，滚动)，事件会穿透到元素的下方的层级。

两个属性值

/* 核心值：禁用所有指针事件（最常用） */
.element {
  pointer-events: none;
}

/* 恢复默认：元素正常响应事件（取消禁用时用） */
.element {
  pointer-events: auto; /* 默认值，无需主动写，除非覆盖了 none */
}

2.应用场景

2.1遮罩穿透

弹窗遮罩层下方的元素需要可点击（比如弹窗非模态，允许操作背景），或遮罩仅用于视觉效果，不拦截事件。

<!-- 非模态弹窗：遮罩不拦截点击 -->
<template>
  <div class="popup">
    <div class="popup-mask" :style="{ pointerEvents: isNonModal ? 'none' : 'auto' }"></div>
    <div class="popup-content">弹窗内容</div>
  </div>
</template>

2.2图标/装饰元素不拦截事件

按钮内部有图标（仅装饰），点击图标时希望触发按钮的点击事件（而非图标本身拦截）

<template>
  <button @click="handleSubmit" class="submit-btn">
    <svg class="icon" viewBox="0 0 24 24">
      <!-- 图标路径 -->
    </svg>
    提交
  </button>
</template>

<style scoped>
.submit-btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  pointer-events: none; /* 关键：图标不拦截点击，事件传递给按钮 */
}
</style>

2.3 禁用元素但保留样式

需求：某些元素需要 “视觉上正常显示，但不可点击”（比如表单中临时禁用的选项，不想用 disabled 导致样式变灰）。

<template>
  <!-- 标签：视觉正常，点击无效 -->
  <span 
    class="tag" 
    :style="{ pointerEvents: isDisabled ? 'none' : 'auto' }"
  >
    不可点击的标签
  </span>
</template>

<style scoped>
.tag {
  padding: 4px 8px;
  background: #42b983;
  color: white;
  border-radius: 4px;
  cursor: pointer; /* 虽然 pointer-events: none 时 cursor 无效，但可配合使用 */
}

/* 禁用时可单独调整视觉（可选） */
.tag[style*="pointer-events: none"] {
  opacity: 0.8; /* 轻微透明，提示不可点击 */
}
</style>