为何点击contenteditable元素外部仍会激活该元素？

问题重现代码 #

CSS

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  padding: 5px;
  background-color: rgb(200, 200, 200);
}

HTML

<div class="buttons">
  <div class="button">One</div>
  <div class="button">Two</div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">Three</div>
</div>

问题原因解析 #

• 核心是浏览器对contenteditable="true"元素的默认焦点优化：页面首次加载后，用户第一次点击页面内任意区域（包括flex容器的gap空白）时，浏览器会自动把焦点定位到页面中的可编辑元素上——这里第三个按钮是唯一的可编辑元素，所以哪怕点击的是它旁边的空白，也会激活该元素。
• 现象仅出现一次的原因：当焦点已经落在这个可编辑元素上后，后续点击空白区域时，浏览器不会重复触发焦点跳转逻辑，自然就不会再激活它。
• 改用inline-flex仅部分缓解的原因：inline-flex是行内级容器，它的外部空白不属于容器内部空间，所以右侧大部分空白点击不会触发焦点定位，但左侧的细微布局间隙（属于容器内部）仍会被浏览器识别为可触发区域，因此还会出现一次激活问题。

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