声明式触发器:点击与「兴趣」
打开/关闭浮层这种事,本来都要 addEventListener('click', …) 一个个挂。新的 invoker(调用者)把它做成 HTML 属性:点击类用 command + commandfor,hover / focus 类用 interestfor。按钮和它控制的目标在 HTML
里直接连线,大量浮层交互可以一行 JS 都不写。
1 · command / commandfor:点击命令
commandfor="目标id" 把 <button> 变成调用者,command 指定动作。内置命令覆盖了 dialog 和 popover 的常用操作:
commandfor 指目标、command 指动作,覆盖 dialog 与 popover 的常用操作。2 · 自定义命令:command 事件 + e.source
自定义动作用 -- 前缀命名。点击时,目标元素上派发一个 CommandEvent,里头 e.command 是命令字符串、e.source 是哪个按钮触发的。下面三个按钮共用一张图当目标:
-- 前缀命名的自定义命令。点击时目标元素上派发 CommandEvent,其中带命令字符串与触发按钮。3 · interestfor:hover / focus 触发的「兴趣」
command 是「点击」。但 tooltip、头像悬停卡这类要的是「我对它有兴趣」——鼠标悬停或键盘聚焦时显示,离开就收。这就是 interestfor:放在 <a> / <button> 上,指向一个(通常是
popover="hint" 的)目标。它不需要 command 那样的动作参数——语义固定为「有兴趣就显示,失去兴趣就隐藏」。
interestfor 的悬停与聚焦触发,以及两个延时属性的效果。
配套还有:伪类 :interest-source(处于兴趣态的触发元素)/ :interest-target(被激活的目标),以及延时属性 interest-delay-start / interest-delay-end(简写 interest-delay,默认 0.5s)控制悬停多久才弹/移开多久才收。放在
<a> 上还能双重行为:点击/回车走链接跳转,悬停/聚焦显示兴趣浮层。(浮层位置一般配 CSS Anchor Positioning 钉到触发元素旁。)
4 · 三种触发器对照
popovertarget、command 与 interestfor。
延伸阅读:interestfor 与 invoker / command / source · 张鑫旭——声明式 command / commandfor 与 hover 触发的 interestfor,以及
CommandEvent.source / :interest-source 等配套;再配 Una Kravets 关于 interest invokers / popover="hint" 的演示串(X 需登录可见)。