对焦后立即模糊射击

问题描述

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

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

下面的代码说明除＃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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript onblur onfocus