题干与适用场景
你要为用户头像做一个预览浮层：鼠标悬停、键盘聚焦或触摸长按时显示，离开兴趣范围后隐藏。请说明如何使用 interestfor，并处理兼容性、焦点、延迟和不应悬停触发的内容。
Popover API 的 interest invoker 让按钮或链接通过 interestfor 指向同一文档树中的目标 ID。目标可以是 popover="hint" 的预览卡，浏览器在悬停、聚焦或长按等产生兴趣时显示，兴趣结束时隐藏。它适合非关键、短暂的辅助信息，不应成为唯一的信息或操作入口。
面试官考察点
面试官会关注你是否区分兴趣触发与激活触发，是否理解目标 ID、Popover 状态和 InterestEvent，能否处理键盘、触摸、延迟、兼容性及可访问性，并能说明何时应改用显式点击或普通链接。
回答前需要澄清的问题
先确认浮层是提示、预览还是包含可操作控件的菜单；确认支持的浏览器、是否需要触摸设备、浮层内容是否关键，以及目标是否位于同一 DOM 树。再确认浮层是否允许进入并停留、显示和隐藏延迟、焦点返回规则及无 JavaScript 时的最低体验。
30 秒回答框架
“我会让原生按钮或链接用 interestfor 指向一个 Popover 提示目标，保留可见的头像名称和普通链接作为主路径。interest invoker 负责悬停、聚焦和长按的显示生命周期；我会用 interest-delay 或等价策略降低抖动。先做特性检测，旧浏览器回退到聚焦与点击监听。预览信息不能只存在浮层，键盘和触摸都要可用，带操作的内容则改用显式激活。”
分步骤深入解答
第一步：建立兴趣触发关系
interestfor 的值指向目标元素的 ID，目标与触发器需要在同一树中。一个最小例子如下：
<button interestfor="profile-preview" aria-label="查看 Ada 的简介">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
早期计算机科学先驱，简介内容可在个人页查看。
</article>这里的按钮仍是可聚焦的原生控件；浮层是辅助预览，不承担进入个人页的唯一入口。
第二步：区分兴趣与激活
兴趣触发是暂态反馈，适合预览、解释和补充信息；点击或按下 Enter 是激活动作，适合导航、提交和不可逆操作。不要把带删除、购买或确认的控件藏在只靠兴趣出现的浮层里。
第三步：保留 Popover 的边界
popover="hint" 目标由浏览器管理显示状态。不要同时用另一套脚本强制切换同一属性，避免原生生命周期和组件状态互相覆盖。若浮层需要菜单键盘模型、焦点陷阱或复杂状态，就应评估对话框、菜单组件或显式点击方案。
第四步：处理显示延迟与抖动
进入和离开的边界可能在触发器与浮层之间快速切换。可以使用 interest-delay 设置显示与隐藏延迟，并把浮层和触发区域设计成连续的命中区域。延迟应通过真实指针、键盘和触摸测试校准，不能靠固定数字假设所有设备都合适。
第五步：覆盖键盘与读屏路径
原生按钮或链接可获得焦点，浮层出现时应有清晰的名称关系，且焦点不应被意外抢走。预览文字必须能通过可见名称、链接目标或其他静态内容获得；不要用悬停状态替代焦点指示，也不要把重要错误只放在浮层中。
第六步：考虑触摸和长按
触摸没有传统 hover。interest invoker 的长按行为可提供预览，但它不应阻断正常点击或滚动。对关键动作保留明确的 tap 入口，并在小屏幕上检查浮层是否遮挡内容、超出视口或无法关闭。
第七步：做特性检测与降级
不能假设所有运行环境都支持 interestfor。可检测 HTMLButtonElement.prototype.interestForElement；不支持时保留普通 HTML 内容和链接，再用同一业务状态的 focus、pointer 或 click 监听提供基础预览。降级代码只补能力，不重复渲染另一份事实。
第八步：验证生命周期与边界
测试鼠标进入、移出、从触发器移动到浮层、Tab 聚焦、Shift+Tab、触摸长按、滚动、Escape、快速重复进入以及目标动态卸载。验证无障碍树、浮层边界、延迟、无 JavaScript 内容和浏览器兼容矩阵；MDN 的可用性标签不能代替项目目标浏览器的实测。
高质量示范回答
我会把头像做成原生链接或按钮，用 interestfor 指向同一树中的 popover="hint" 预览卡。预览只提供补充信息，头像名称和个人页链接在静态内容中始终可见。兴趣生命周期覆盖鼠标、焦点和长按；我会用 interest-delay 降低抖动，并让触发器到浮层之间的命中区域连续。实现前检测 interestForElement，不支持时保留普通内容并用同一处理逻辑补充 focus、pointer 或 click。对删除、购买、菜单等带副作用或需要完整键盘模型的内容，使用显式激活组件，不把关键操作放在兴趣浮层里。最后用键盘、触摸、读屏、滚动、Escape、动态卸载和目标浏览器矩阵验收。
常见错误
把 interestfor 当成任意元素的通用 tooltip 属性
它建立的是兴趣触发器到目标的关系，并依赖 Popover 及相关浏览器能力。若目标不是合适的浮层语义，或需要复杂菜单状态，应该采用对应组件模型。
只写 hover CSS，忽略焦点和触摸
键盘用户没有鼠标 hover，触摸也没有相同的指针轨迹。必须保留焦点路径、tap 入口和静态可见信息。
让浮层承载唯一关键内容
用户可能使用不支持该属性的浏览器、关闭脚本或无法完成长按。关键名称、状态和操作应在主内容或显式激活路径中可获得。
追问及应对
不支持 interestfor 的浏览器怎么办？
先保证普通 HTML、链接和焦点样式完整，再做特性检测。降级监听只补充预览，不改变主导航和信息结构，并在兼容矩阵中验证。
如何避免触发器与浮层之间闪烁？
让命中区域连续，使用显示和隐藏延迟，并在移入目标后保持兴趣。不要用多个脚本同时控制 Popover 状态；必要时记录进入、离开和卸载顺序。
键盘聚焦时应该把焦点移入浮层吗？
纯预览通常不抢焦点，保持触发器焦点并提供可感知名称。若浮层包含可操作内容，应改用显式激活的菜单或对话框模型，定义进入、Escape 和返回规则。
如何处理触摸长按与点击冲突？
长按预览不能阻断 tap 导航或滚动。为关键动作保留 tap 目标，并在真实设备上验证长按、短按、滚动和视口边界。
interest-delay 应该设置多少？
没有跨设备通用的固定值。根据内容密度和误触成本测量进入、离开和快速移动场景，同时提供立即聚焦反馈，避免延迟让键盘用户等待。
什么时候不该使用 interest invoker？
当内容关键、操作有副作用、需要复杂焦点管理、需要跨树协调或必须覆盖旧浏览器时，应使用静态内容加显式激活的组件。interest invoker 更适合低风险、暂态的辅助预览。