pointer-events

# pointer-events

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 1 ）	√（ 12 ）	√（ 1.5 ）	√（ 9 ）	√（ 4 ）	√（ 11 ）

# 语法

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;

# pointer-events 的属性值

名称

兼容性

描述

auto

与pointer-events属性未指定时的表现效果相同，对于 SVG 内容，该值与visiblePainted效果相同

none

元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

# 默认值

auto

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <view class="container1">
        <text>控制父视图pointer-events打开时可以点击</text>
        <switch :checked="true" @change="onChange1" />
      </view>
      <view class="container" :style="{ 'pointer-events': pointerEvents1 }">
        <text class="text">点击修改宽度</text>
        <view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
      </view>
      <view class="container1">
        <text>控制遮罩层pointer-events关闭时可以点击</text>
        <switch :checked="true" @change="onChange2" />
      </view>
      <view class="container">
        <text class="text">点击修改宽度(递增)</text>
        <view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
        <view class="mask" :style="{ 'pointer-events': pointerEvents2 }"></view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>



<style>
  .container1 {
    margin: 7px 0px 7px 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .container {
    margin: 7px;
    background-color: white;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .base-style {
    width: 200px;
    height: 200px;
    background-color: brown;
  }

  .width-progress {
    width: 200px;
    height: 200px;
    background-color: brown;
  }

  .transition-width {
    transition-property: width;
    transition-duration: 1s;
  }

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>