大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

按钮对于开发动态 Web 应用程序至关重要，其一般用于打开菜单、切换操作和提交表单，为 Web 上的交互性提供了基础。

Chrome 135 引入了新的功能，开发者可使用新的 command 和 commandfor 属性提供声明性行为，增强和替换原有的 popovertargetaction 和 popovertarget 属性。

1. 传统模式：使用 JavaScript 控制按钮行为

在没有借助前端框架的情况下构建按钮行为会稍显复杂。虽然 HTML 为按钮提供了 onclick 事件处理程序，但由于内容安全策略 (CSP)，处理程序可能被禁止。

同时，虽然事件是在按钮元素上分派的，但按钮通常放在页面上以同时控制其他元素（例如：显示隐藏），开发者还需要使用辅助技术 (Assistive Technology) 协助用户访问此交互。

例如下面的代码表示传统按钮的处理逻辑：


  
  
    
  

<script type="module">
document.addEventListener('click', e => {
  const button = e.target;
  if (button.matches('.menu-opener')) {
    const menu = button
      .closest('.menu-wrapper')
      .querySelector('.menu-content');
    if (menu) {
      button.setAttribute('aria-expanded', 'true');
      menu.showPopover();
      menu.addEventListener('toggle', e => {
        // 关闭后重置 aria-expanded=false
        if (e.newState == 'closed') {
          button.setAttribute('aria-expanded', 'false');
        }
      }, {once: true})
    }
  }
});
</script>

示例代码通过在按钮元素上设置 aria-expanded 属性来表示弹窗是否展开或折叠，以及受控元素是否显示或隐藏。这种方法可能有点麻烦，而借助于成熟的前端框架能在一定程度上改善开发体验，例如： React 框架会将点击事件映射到组件内部状态的更改：

function MyMenu({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  // 设置组件内部状态
  const open = useCallback(() => setIsOpen(true), []);
  const handleToggle = useCallback((e) => {
    //   弹窗影响状态
    setIsOpen(e.newState === "open");
  }, []);
  const popoverRef = useRef(null);
  useEffect(() => {
    if (popoverRef.current) {
      if (isOpen) {
        popoverRef.current.showPopover();
      } else {
        popoverRef.current.hidePopover();
      }
    }
  }, [popoverRef, isOpen]);
  return (
    <>
      
      
        {children}
      
    
  );
}

一些设计系统或前端库可能会更进一步，提供封装状态变化的按钮元素的包装器，从而将状态变化抽象到触发组件后面，以牺牲灵活性来换取更好的开发体验：

import {MenuTrigger, MenuContent} from 'my-design-system';
// 从设计系统导入
function MyMenu({children}) {
  return (
    
      
    
    {children}
  );
}

2. 使用 command 和 commandfor 模式控制按钮行为

Invoker Commands API 提供了一种以声明方式为按钮分配行为的方法，允许在按钮被激活（单击或通过按键调用，例如：空格键或回车键）时控制交互元素。借助于 command 和 commandfor 属性，可以为按钮操作带来框架的人体工程学且不牺牲灵活性。

commandfor：将
command：指定对由控件

2.1 command 和 commandfor 最大化减少 JavaScript 代码

以下 HTML 在按钮和菜单之间设置声明关系，让浏览器自动处理逻辑和可访问性。无需关注 aria-expanded 或添加任何其他 JavaScript。

command 支持一系列内置行为，可映射到各种交互元素的 API：

show-popover：映射到 el.showPopover()
hide-popover：映射到 el.hidePopover()
toggle-popover：映射到 el.togglePopover()
show-modal：映射到 dialogEl.showModal()
close：映射到 dialogEl.close()

通过以上命令映射方式，简化了可访问性（例如：提供 aria-details 和 aria-expanded 等效关系）、焦点管理等复杂而繁琐的工作。

例如下面的示例，还可以使用 command 和 commandfor 控制确认弹窗：



  
     确认删除记录 
    
  
   确定该操作？其无法取消

单击 “删除” 按钮将以模态方式打开对话框，而单击 “关闭”、“取消” 或 “删除” 按钮将关闭对话框，同时还会在对话框上触发 “close” 事件，该事件具有与按钮值匹配的 returnValue 属性。该方式最大化减少了 JavaScript 代码，只需在对话框上监听一个事件来确定下一步要做什么：

dialog.addEventListener("close", (event) => {
  if (event.target.returnValue == "cancel") {
    console.log("cancel was clicked");
  } else if (event.target.returnValue == "close") {
    console.log("close was clicked");
  } else if (event.target.returnValue == "delete") {
    console.log("delete was clicked");
  }
});

2.2 使用 --command 自定义命令

除了内置命令之外，开发者还可以使用 --self-command 前缀自定义命令。

自定义命令会在目标元素上分派 “command” 事件，且与内置命令一样不会执行任何额外逻辑。其为构建以各种方式对按钮做出反应的组件提供了灵活性，而无需任何包装器组件、遍历目标元素的 DOM 或将按钮点击映射到状态更改。




<script type="module">
  const image = document.getElementById("the-image");
  // 添加自定义命令的事件监听函数
  image.addEventListener("command", (event) => {
   if (event.command == "--rotate-landscape") {
    image.style.rotate = "-90deg"
   } else if (event.command == "--rotate-portrait") {
    image.style.rotate = "0deg"
   }
  });
</script>

3. 与 popovertargetaction 和 popovertarget 的不同

如果以前使用过 popover，可能熟悉 popovertarget 和 popovertargetaction 属性，其工作原理分别与 commandfor 和 command 类似，但特定于 popover。


Greetings, one and all!

command 和 commandfor 属性完全取代了旧属性，例如：新属性支持旧属性所做的一切，并添加了新功能。

参考资料

https://developer.chrome.com/blog/command-and-commandfor

https://open-ui.org/components/future-invokers.explainer/

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API

思凡资源网

2025 年 Chrome 宣布支持零 JavaScript 开发弹窗?