解决因为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,先凑合下吧):


一开始的样子:

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

鼠标拖动tag组件到创建图那个折叠面板时自动打开:
解决因为z-index层级的原因导致无法触发下层鼠标事件

结语

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