CSS的pointer-events属性可以控制HTML元素如何响应鼠标/触控事件, 包括CSS的hover/active状态, JavaScript中的click/tap事件, 以及光标是否可见.

    .avoid-clicks {
        pointer-events: none;
    }

虽然pointer-events的属性多达11个可能的值,

但是绝大部分除了其中的三个, 是为SVG保留的. 这三个可以适用于所有HTML元素的值为:

  • none, 阻止所有的点击事件, 状态以及在指定HTML元素上的鼠标状态
  • auto, 恢复默认功能(对于pointer-events为none的元素的子元素来说, 很有用, 可以让子元素恢复默认功能)
  • inherit, 将继承有pointer-events属性的上级元素的pointer-events属性

为什么说这个属性非常的实用呢，在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面。

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。