按钮对于开发动态 Web 应用程序至关重要，其一般用于打开菜单、切换操作和提交表单，为 Web 上的交互性提供了基础。
Chrome 135 引入了新的功能，开发者可使用新的 command 和 commandfor 属性提供声明性行为，增强和替换原有的 popovertargetaction 和 popovertarget 属性。
1. 传统模式：使用 JavaScript 控制按钮行为
在没有借助前端框架的情况下构建按钮行为会稍显复杂。虽然 HTML 为按钮提供了 onclick 事件处理程序，但由于内容安全策略 (CSP)，处理程序可能被禁止。
同时，虽然事件是在按钮元素上分派的，但按钮通常放在页面上以同时控制其他元素（例如：显示隐藏），开发者还需要使用辅助技术 (Assistive Technology) 协助用户访问此交互。
例如下面的代码表示传统按钮的处理逻辑：
<div class="menu-wrapper"> <button class="menu-opener" aria-expanded="false"> 打开菜单 </button> <div popover class="menu-content"> <!-- 复杂的弹窗内容 --> </div></div>
<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 ( <> <button onClick={open} aria-expanded={isOpen}> 打开弹窗 </button> <div popover onToggle={handleToggle} ref={popoverRef}> {children} </div> </> );}一些设计系统或前端库可能会更进一步，提供封装状态变化的按钮元素的包装器，从而将状态变化抽象到触发组件后面，以牺牲灵活性来换取更好的开发体验：
import {MenuTrigger, MenuContent} from 'my-design-system';// 从设计系统导入function MyMenu({children}) { return ( <MenuTrigger> <button>Open Menu</button> </MenuTrigger> <MenuContent>{children}</MenuContent> );}2. 使用 command 和 commandfor 模式控制按钮行为
Invoker Commands API 提供了一种以声明方式为按钮分配行为的方法，允许在按钮被激活（单击或通过按键调用，例如：空格键或回车键）时控制交互元素。借助于 command 和 commandfor 属性，可以为按钮操作带来框架的人体工程学且不牺牲灵活性。
commandfor：将元素转换为按钮，控制给定的交互元素，将要控制的元素的 ID 作为其值
command：指定对由控件控制的元素执行的操作，通过 commandfor 属性指定
2.1 command 和 commandfor 最大化减少 JavaScript 代码
以下 HTML 在按钮和菜单之间设置声明关系，让浏览器自动处理逻辑和可访问性。无需关注 aria-expanded 或添加任何其他 JavaScript。
<button commandfor="my-menu" command="show-popover">Open Menu</button><div popover id="my-menu"> <!-- 复杂的弹窗内容 --></div>
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 控制确认弹窗：
<button commandfor="confirm-dialog" command="show-modal"> 删除记录</button><dialog id="confirm-dialog"> <header> <h1> 确认删除记录 </h1> <button commandfor="confirm-dialog" command="close" aria-label="Close" value="close"> <img role="none" src="/close-icon.svg"> </button> </header> <p> 确定该操作？其无法取消 </p> <footer> <button commandfor="confirm-dialog" command="close" value="cancel"> 取消 </button> <button commandfor="confirm-dialog" command="close" value="delete"> 删除 </button> </footer></dialog>
单击 “删除” 按钮将以模态方式打开对话框，而单击 “关闭”、“取消” 或 “删除” 按钮将关闭对话框，同时还会在对话框上触发 “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 或将按钮点击映射到状态更改。
<button commandfor="the-image" command="--rotate-landscape"> 横屏</button><button commandfor="the-image" command="--rotate-portrait"> 纵向</button><img id="the-image" src="photo.jpg"><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。
<button popovertarget="my-popover">Open Popover</button><div popover id="my-popover">Greetings, one and all!</div>
command 和 commandfor 属性完全取代了旧属性，例如：新属性支持旧属性所做的一切，并添加了新功能。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
