search

tiddly-gittly / tw-command-palette

Command palette Chinese translated
https://tiddly-gittly.github.io/tw-command-palette/
MIT License
4 stars 1 forks source link

命令菜单当悬浮窗口调出来后，可以点击下层元素 #11

Closed linonetwo closed 2 months ago

linonetwo commented 2 years ago

应该屏蔽一下事件冒泡

截屏2022-05-21 13 36 53
oeyoews commented 1 year ago

当打开命令菜单的时候需要移除pointer-event: none; @linonetwo

linonetwo commented 1 year ago

但是问题不是能点到下面吗，不应该是加上这个防止点击？

oeyoews commented 1 year ago

pointer-event: none 是忽略当前元素的鼠标事件, 但是下层的子元素任然任然可以点击, 由于masklayer的z-index 高于故事河, 所以下层元素是被挡住的, 无法相应鼠标事件, 需要先加上一个pointer-envent: none; 相应鼠标事件, 当命令菜单打开的时候再移除pointer-envent: none;(masklayer在没有打开命令菜单的时候就已经渲染好了) image

oeyoews commented 1 year ago

https://neotw.oeyoewl.top/ 可以在这里看一下效果(部分样式使用tailwindcss改写)

linonetwo commented 2 months ago

新版没这个问题了