pointer-events

认识pointer-events属性

pointer-events是一个 CSS 属性，用于控制元素在鼠标事件中的表现。

一、可能的值

1. auto（默认值）：
   元素对鼠标事件的响应正常。鼠标可以与该元素进行交互，如点击、悬停等。
2. none：
   元素不对鼠标事件做出响应。鼠标事件会“穿透”该元素，好像该元素不存在一样。这对于在某些情况下需要让鼠标事件透过一个元素而作用于其后面的元素非常有用。

二、实际应用场景

1. 禁用链接点击：
   如果需要临时禁用一个链接，可以将其 pointer-events 设置为 none。这样，用户点击该链接时不会触发任何行为。
   例如：
   a.disabled-link { pointer-events: none; }
2. 覆盖鼠标事件：
   当有多个元素重叠时，可以通过设置 pointer-events 来控制哪个元素响应鼠标事件。
   比如，有一个半透明的覆盖层，希望用户在覆盖层显示时不能点击下面的元素，可以将覆盖层的 pointer-events 设置为 auto，下面元素的 pointer-events 设置为 none。
3. 优化性能：
   在某些情况下，将一些不相关的元素的 pointer-events 设置为 none 可以减少浏览器对鼠标事件的处理，从而提高性能。