使用 pointerevents 阻止元素成为鼠标事件的target

实际场景描述：

Vue(3.x)项目中，入口元素列表中的每一项都有监听各自的click（点击跳转页面）事件，但列表被分成了多行，行首元素会拥有一个UI装饰性的::after伪元素（面积比较大），由于伪元素是入口元素的一部分（<element>::after</element>），所以点击到其::after也会触发元素自身的click事件。这样是不允许的，当时也尝试了使用js处理这种情况，但不太理想也不简洁优雅，所了查了下是否有CSS方案可以直接处理这种问题。

比较理想的方案就是使用 pointer-events 

/*less*/
&:after {
  content: '';
  position: absolute;
  /* ... */
  pointer-events: none;
}

属性描述：pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

属性值列表：

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。

如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。

更多信息可查看MDN：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events