CSS pointer-events 属性

1 解释

pointer-events 何种情况下元素可以成为鼠标事件的目标

2 取值

• auto （默认值）
• none （元素不能对鼠标事件做出反应）

/ 以下只适用于 SVG /

• visiblePainted

  visibility 属性值为 visible，且鼠标指针在元素内部，且 fill 属性指定了 none 之外的值

  visibility 属性值为 visible，鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值

• visibleFill

  只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。

• visibleStroke

  只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。

• visible

  只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。

• painted

  鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
  鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值

• fill

  只有鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 和 visibility 属性的值不影响事件处理。

• stroke

  只有鼠标指针在元素边界上时，元素才会成为鼠标事件的目标，stroke 和 visibility 属性的值不影响事件处理。

• all

  只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill、stroke 和 visibility 属性的值不影响事件处理。

3 作用

1 阻止用户的点击动作产生任何效果

2 阻止缺省鼠标指针的显示

3 阻止CSS里的hover和active状态的变化触发事件

4 阻止JavaScript点击动作触发的事件

4 取值为none的场景

1 任何元素设置pointer-event：none的效果相当于input设置disabled 属性，可以实现事件的禁用

2 当地图需要全屏蒙层，但是其下的地图图层还需要响应鼠标事件。蒙层设置 pointer-events: none，地图就可以响应拖动和点击等事件。