解决因为z-index层级的原因导致无法触发下层鼠标事件

前言

最近在做一个拖动的组件，其中一个就是拖动tag到一个div折叠面板内会自动打开div折叠面板。虽然通过设置z-index可以很简单实现这个效果，但却遇到问题了。

接下来我就说一下实现的探索过程吧：

1：tag设置z-index为-1

虽然tag设置z-index为-1时可以很容易触发鼠标移动到div折叠面板上的onmouseover事件从而打开折叠面板，但如果页面高度较大，有滚动，这时拖动tag到滚动后出现的页面会被隐藏，这显然不是我们想要看到的。

2：不设置tag的层级

这时虽然在滚动页面部分可以显示tag组件，但却因为层级的原因导致无法触发折叠面板的onmouseover事件，也就无法实现基本功能了。

思路：

有上面两种方式总结得出，要实现功能必须走既不设置负数层级给tag组件，又要可以触发折叠面板的鼠标事件。

最终解决办法

好了，终于到了解决时刻，其实我们只需要给tag组件加上pointer-events:none就可以解决了。
注意：pointer-events:none虽然可以让鼠标事件无效，从而不影响层级下面的组件鼠标事件，但是，这不能使其键盘事件无效。

效果图（最近再弄个东西，不方便弄gif，先凑合下吧）：

一开始的样子：

鼠标拖动tag组件到创建图那个折叠面板时自动打开：

结语

希望能帮到各位，在下告辞。