pointer-events

【文档地址】 【参考文章】

常用值

值	描述
auto	与 pointer-events 属性未指定时的表现效果相同
none	当一个元素设置 pointer-events: none 时，浏览器会忽略这个元素上的鼠标事件，直接将事件作用在点击区域下方的元素上

实例

穿透遮挡物

当点击 span 元素时，并不会触发 span 元素的点击事件，而是穿透到下方的 input 元素上并使其聚焦

::: normal-demo 代码

<div class="form">
    <input type="text" />
    <span>username</span>
</div>

* {
  margin: 0;
  padding: 0;
}
.form {
  margin: 8px 0 0;
  position: relative;
  width: 300px;
}
input {
  display: block;
  width: 100%;
  line-height: 36px;
  font-size: 18px;
  outline: none;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #ccc;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 36px;
  padding: 0 12px;
  transition: all 0.4s ease;
  pointer-events: none;
}
input:focus ~ span {
  background: #000;
  color: #fff;
  line-height: 20px;
  font-size: 12px;
  padding: 0 8px;
  top: -24px;
}

:::

防止连续提交

为按钮设置 pointer-events: none 防止连续提交

::: normal-demo 代码

<button onclick="console.log('保存')">防止连续点击</button>

button {
    user-select: none;
    animation: throttle 2s step-end forwards;
}
button:active {
    animation: none;
}
@keyframes throttle {
    from {
        pointer-events: none;
    }
    to {
        pointer-events: all;
    }
}

:::