Html 为什么即使我点击其他地方，我的 contenteditable="true" 也会被激活

发布于07月11日

以下是我的代码:

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

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

<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>

现在，如果我点击第三个按钮的右边，不再点击按钮，只是在右边的某个地方，那么第三个按钮仍然被激活.为什么？这太奇怪了！

这只会发生一次！

用inline-flex代替会有帮助，但我需要flex，如果我在按钮左侧的小空白处点击下一个按钮，它仍然会发生.

推荐答案

Very Simple Workaround个

正如@RokoC.Buljan在一条 comments 中指出的那样，这个问题似乎是Chromium漏洞.

简单的解决方法是在最后一个按钮后添加<wpr>标签.这Line Break Opportunity基本上是一个空元素.然而，您也可以使用 不间断空间实体，它同样有效.

Test Snippet个

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

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

<h4>1. Original without workaround</h4>
<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>

<h4>2. Using a word-break opportunity tag</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  <wbr>
</div>

<h4>3. Using a non-breaking space entity</h4>
<div class="buttons">
  <div class="button">
    One
  </div>
  <div class="button">
    Two
  </div>
  <div class="button" tabindex="0" contenteditable="true" spellcheck="false">
    Three
  </div>
  &nbsp;
</div>