Alpine.js模态框回车触发重复打开问题排查求助

问题根源 #

1. 冗余事件绑定：给数字div同时绑定了@click和@keyup.enter/@keyup.space，但浏览器默认会将可聚焦元素的回车/空格操作映射为click事件，导致重复触发打开逻辑；
2. 焦点回退触发事件：关闭模态框后，焦点自动回到之前选中的数字div，此时回车键的keyup事件被捕获，再次执行打开操作；
3. 状态类型混乱：用false（布尔值）和1/2/3（数字）混用表示模态框状态，可能引发判断异常。

修复方案 #

1. 移除冗余键盘事件 #

利用浏览器原生行为，带有tabindex="0"的可聚焦元素按下回车或空格会自动触发click事件，因此只需保留@click绑定，删除所有@keyup.enter和@keyup.space。

2. 统一状态值类型 #

将x-data中的open初始化为0（代表关闭状态），打开对应模态框时设置为1/2/3，关闭时重置为0，保持状态类型一致。

3. 简化关闭按钮逻辑 #

按钮本身默认支持回车/空格触发点击，无需额外绑定键盘事件，保留@click即可。

修改后的完整代码 #

<div x-data="{ open: 0 }">  
  <div class="mt-8 grid grid-cols-3 gap-8 mx-auto max-w-4xl">
    <div 
         class="aspect-square rounded bg-gray-300 grid place-items-center font-bold text-3xl"
         @click="open = 1"
         tabindex="0"
         >1</div>
    <div 
         class="aspect-square rounded bg-gray-300 grid place-items-center font-bold text-3xl"
         @click="open = 2"
         tabindex="0"
         >2</div>
    <div 
         class="aspect-square rounded bg-gray-300 grid place-items-center font-bold text-3xl"
         @click="open = 3"
         tabindex="0"
         >3</div>
  </div>
  <div
            id="modal"
            class="bg-black/50 fixed top-0 left-0 w-full h-full p-4 grid place-items-center z-10"
            x-show="open !== 0"
            x-cloak
            x-trap.inert="open !== 0" 
            x-transition.opacity
            >
            <div class="modal__body bg-white max-w-[760px] p-8 relative" x-transition.delay.50ms>
              <button 
                    type="button"
                    class="font-bold uppercase"
                    @click="open = 0"
                    tabindex="0"
                    >
                    Close
                </button>
              <div>Modal content for item {{ open }}</div>
    </div>
  </div>
</div>

效果验证 #

修改后，通过Tab选中数字div，按下回车或空格可正常打开对应模态框；点击关闭按钮或按下回车/空格关闭模态框时，不会触发重复打开操作，同时保持了无障碍访问的兼容性。

内容的提问来源于stack exchange，提问作者Pol