pointer-events:none&pointer-events: auto

pointer-events: none 是一个 CSS 属性,它的作用是定义元素在何时能被鼠标或触摸操作激活。

当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。
换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。
常见使用场景有:

1. 实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。
2. 实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。
3. 修复点击穿透问题。在一个元素的子元素上设置 pointer-events: none,可以防止点击事件穿透到父层元素上。
4. 改变鼠标事件的触发对象。你可以在一个元素上设置 pointer-events: none,然后在它的子元素上绑定事件,这样鼠标交互会直接在子元素上触发事件,跳过中间元素。

示例代码：

<div class="click-through">
  <button class="clickable-child">Click me</button>
</div>

.click-through {
  pointer-events: none;
}

.clickable-child {
  pointer-events: auto; 
}

这里 .click-through 元素会无法响应点击,但其子元素button保留默认事件响应行为,所以点击button可以正常触发点击事件。
总之,pointer-events属性允许我们更灵活地控制鼠标事件与元素间的交互作用,可以实现许多交互效果。

pointer-events: auto 是 pointer-events 属性的默认值。

当 pointer-events 设置为 auto 时,元素恢复默认的鼠标事件响应行为。即:

1. 如果元素本身或子元素设置了事件处理器(如onclick),那么元素是可点击的,鼠标点击可以触发绑定的事件。
2. 如果元素是默认不可点击的(如<p>标签),那么鼠标交互不会触发任何事件。
3. 元素根据默认规则确定是否接受其他鼠标事件(如mouseover、mousemove 等)。
   所以,pointer-events: auto 与不设置 pointer-events 属性的效果是一致的 - 元素恢复默认鼠标交互行为。

==pointer-events: auto 的作用就是取消 pointer-events 属性导致的事件响应阻止,让元素恢复默认的鼠标交互方式。==它允许我们在 pointer-events 产生的“事件隔离”环境中启用特定元素的事件响应,实现更为灵活的交互控制。