CSS：响应子元素的鼠标事件，屏蔽父元素的鼠标事件

需求描述

最近遇到这样一个hentai需求：想使用element-ui的多选框tag展示选中项，且支持点击某项进行删除；但需要点击另一个按钮触发弹框进行选择，而非从多选框下拉列表选择。
即：禁用多选框本体的点击事件（点击时不出现下拉列表），但响应多选框里tag的点击事件。

需求分析

本杂鱼隐约记得CSS有这样一个属性：pointer-events，用于设置元素是否对鼠标事件做出反应；设置为“none”时不响应鼠标事件，设置为“auto”时响应鼠标事件。

解决思路

在父元素的样式中设置：

pointer-events: none;

在子元素的样式中设置：

pointer-events: auto;

如果希望保留清除全部选中项的功能，需将el-select的clearable属性设为“true”（默认为false），并设置右侧下拉按钮的样式为不可见但元素存在（会响应鼠标事件，悬浮时变为×图标）：

visibility: hidden;

如果不需要清除全部选中项，设置右侧下拉按钮的样式为不可见且元素不存在即可：

display: none;

鼠标“穿透”

pointer-events还可以实现鼠标“穿透”的效果，比如页面中有两个div：A和B，A覆盖在B的上面，那么想要点击B时总会触发A的点击事件。要触发B的点击事件，就可以给A设置pointer-events: none来实现。