← Dialog / Popover · 浮层与「关闭」的现代解法 / 声明式触发器:点击与「兴趣」 待审核 6 / 9
invokers · command / interestfor

声明式触发器:点击与「兴趣」

打开/关闭浮层这种事,本来都要 addEventListener('click', …) 一个个挂。新的 invoker(调用者)把它做成 HTML 属性:点击类用 command + commandfor,hover / focus 类用 interestfor。按钮和它控制的目标在 HTML 里直接连线,大量浮层交互可以一行 JS 都不写

1 · command / commandfor:点击命令

commandfor="目标id"<button> 变成调用者,command 指定动作。内置命令覆盖了 dialog 和 popover 的常用操作:

2 · 自定义命令:command 事件 + e.source

自定义动作用 -- 前缀命名。点击时,目标元素上派发一个 CommandEvent,里头 e.command 是命令字符串、e.source哪个按钮触发的。下面三个按钮共用一张图当目标:

3 · interestfor:hover / focus 触发的「兴趣」

command 是「点击」。但 tooltip、头像悬停卡这类要的是「我对它有兴趣」——鼠标悬停或键盘聚焦时显示,离开就收。这就是 interestfor:放在 <a> / <button> 上,指向一个(通常是 popover="hint" 的)目标。它不需要 command 那样的动作参数——语义固定为「有兴趣就显示,失去兴趣就隐藏」。

配套还有:伪类 :interest-source(处于兴趣态的触发元素)/ :interest-target(被激活的目标),以及延时属性 interest-show-delay / interest-hide-delay 控制悬停多久才弹/移开多久才收。放在 <a> 上还能双重行为:点击/回车走链接跳转,悬停/聚焦显示兴趣浮层。(浮层位置一般配 CSS Anchor Positioning 钉到触发元素旁。)

4 · 三种触发器对照

延伸阅读:interestfor 与 invoker / command / source · 张鑫旭——声明式 command / commandfor 与 hover 触发的 interestfor,以及 CommandEvent.source / :interest-source 等配套;再配 Una Kravets 关于 interest invokers / popover="hint" 的演示串(X 需登录可见)。