对焦后立即模糊射击

如何解决对焦后立即模糊射击

基本问题是获得焦点的要素会立即失去。这是发生这种情况的要求：

数据以两列格式显示。
用户可以编辑第二列元素中的文本。
当用户单击某个元素时，当前元素应失去焦点，使我能够在被单击的元素获得焦点之前采取一些措施。
用户需要能够跨第二列中的元素选择文本。也就是说，选择范围可以包括第二列中的多个元素，并且不包括第一列中的元素。

下面的代码说明除＃3之外，满足了这些要求。发生的情况是，当用户单击某个元素时，它获得了焦点，但立即失去了焦点。期望的行为是它一直保持焦点，直到用户单击另一个元素为止。

在不牺牲其他要求之一的前提下进行这项工作的任何指导都将受到赞赏。

function f(e) {
  console.log("focus: " + e.target.textContent);
}

function b(e) {
  console.log("blur: " + e.target.textContent);
}

#container {
  display: flex;
  flex-direction: column;
}

.s {
  border: 1px solid steelblue;
  height: 20px;
  width: 200px;
}

.ns {
  border: 1px solid steelblue;
  height: 20px;
  width: 200px;
  background-color: lightgray;
  user-select: none;
}

.row {
  display: flex;
  flex-direction: row;
}

<div id="container" contenteditable="true">
  <span class="row">
    <span class="ns" contenteditable="false">No select,no edit</span>
    <span class="s" contenteditable="true" onfocus="f(event)" onblur="b(event)" tabindex="0">1</span>
  </span>
  <span class="row">
    <span class="ns" contenteditable="false">No select,no edit</span>
    <span class="s" contenteditable="true" onfocus="f(event)" onblur="b(event)" tabindex="1">2</span>
  </span>
  <span class="row">
    <span class="ns" contenteditable="false">No select,no edit</span>
    <span class="s" contenteditable="true" onfocus="f(event)" onblur="b(event)" tabindex="2">3</span>
  </span>
  <span class="row">
    <span class="ns" contenteditable="false">No select,no edit</span>
    <span class="s" contenteditable="true" onfocus="f(event)" onblur="b(event)" tabindex="3">4</span>
  </span>
  <span class="row">
    <span class="ns" contenteditable="false">No select,no edit</span>
    <span class="s" contenteditable="true" onfocus="f(event)" onblur="b(event)" tabindex="4">5</span>
  </span>
</div>