Javascript 打开时聚焦按钮元素的HTML对话框

我目前有一个网站，我正在通过JS打开。出于演示目的，我的对话框中只有一个元素

我的问题是，当我使用.showmodel打开对话框时，由于某种原因，模式中的按钮会聚焦。见以下问题示例：

const dialog=document.querySelectordialog； document.querySelectoropen btn.addEventListener'click'，=>{ dialog.showmodel； }; document.querySelectorclose btn.addEventListener'click'，=>{ dialog.close； }; 关闭btn：焦点{ 背景：红色； } 打开 &时代； 在打开浏览器的“开发人员工具”对话框/只需按F12键即可打开该对话框后，从关闭btn的“样式”部分捕获上述快照

打开对话框时，浏览器的Webkit将显式添加大纲属性

当使用TAB键或等效键浏览web文档时，该属性为具有焦点的链接提供视觉反馈。这对于不能使用鼠标或有视力障碍的人特别有用。如果删除大纲，则会使这些人无法访问您的网站

但如果您仍然想删除它，请使用下面的代码

#close-btn {
  background: red;
  outline: none;
}

---

我希望这将有助于您

这是标准中定义的默认行为，用于在呈现模式子树后从以下位置聚焦模式子树：

为主题运行对话框聚焦步骤。 如果您想保持这种状态并防止按钮聚焦，只需在按钮上触发模糊事件，我尝试使用和属性，但它们似乎不起作用，因此我认为您必须坚持。模糊实现：

const dialog=document.querySelectordialog； document.querySelectoropen btn.addEventListener'click'，=>{ dialog.showmodel； getElementById'close-btn'.blur； }; document.querySelectorclose btn.addEventListener'click'，=>{ dialog.close； }; 关闭btn：焦点{ 背景：红色； } 打开 &时代；

---

谢谢你的回答：。我主要是在寻找一种方法来防止按钮在第一时间被聚焦。我也想知道为什么这会是默认行为，我觉得很奇怪。尽管如此，再次感谢你的回答虽然我不想诉诸模糊，但你解释了为什么会发生这种情况的原因，足以让我接受你的回答。我没有意识到这是故意的默认行为，似乎是我必须通过JS来管理的事情。谢谢：