jquery - 为什么单击事件后进行聚焦时，浏览器的默认聚焦样式为何未应用？

我有一个按下按钮后出现的控件。出现时，会有一些复选框。我想关注第一个复选框。

在按Tab键后用Enter键“单击”按钮时，此方法可以正常工作。
如果您点击按钮，然后用鼠标单击，它也可以工作。
如果您没有先将焦点对准按钮，则无法正常工作。

请参阅以下内容以了解我所拥有的内容。

$('button.goBtn').on("click", () => {
  let c = $('.inputs input:checkbox:first');
  c.focus();
});

.inputs ul {
   list-style-type: none;
}

.inputs label {
   margin-left:10px;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Stop</button>
<button type="button" class="goBtn">Go</button>
<div class="inputs">
 <ul>
     <li><input type="checkbox" id="c1" value="1"/><label for="c1">Checkbox 1</label></li>
     <li><input type="checkbox" id="c2" value="2"/><label for="c2">Checkbox 2</label></li>
     <li><input type="checkbox" id="c3" value="3"/><label for="c3">Checkbox 3</label></li>
     <li><input type="checkbox" id="c4" value="4"/><label for="c4">Checkbox 4</label></li>
 </ul>
</div>

正如您通过按空格键可以看到的那样，第一个复选框实际上是聚焦的，但是并不是“视觉上”聚焦的。

您还可以通过包含input:focus样式来查看此内容，但我不想这样做。

最佳答案

您不需要JS / Jquery就能正常工作（您可以通过以下方式实现
输入控件本身），因此第一个复选框应为：

<input type="checkbox" id="c1" value="1" autofocus/>

它适用于chrome和IE

关于jquery - 为什么单击事件后进行聚焦时，浏览器的默认聚焦样式为何未应用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57928446/