在突出显示的元素上添加 class？

Question

是否可以在突出显示的元素上添加 class？ 例如：如果我 Select .block-2, .block-3, .block-4 ，然后按Enter键，那么所有这些块都应该添加一个新的 class。我的意思是我需要在突出显示选择时获取所有这些元素当按下Enter键时。

<div class="root">
  <div class="block-1"> 1st </div>
  <div class="block-2"> 2nd </div>
  <div class="block-3"> 3rd </div>
  <div class="block-4"> 4th </div>
  <div class="block-5"> 5th </div>
</div>

Answer 1

您需要使用选项 api 来执行此操作。 如果你是 ie9+，你可以使用containsNode来做 rest。

https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

假设您可以使用containsNode ，您应该只能监听keydown ，按Enter过滤，然后最终查询文档以进行选择并根据块节点是否包含在选择中来应用类。

const $root = document.querySelector('.root');

document.addEventListener('keydown', (e) => {
    if (e.code == "Enter") {
    const selection = document.getSelection();
    console.log(selection)
    for (const $child of $root.children) {
        if (selection.containsNode($child) || $child.contains(selection.anchorNode) || $child.contains(selection.focusNode)) {
        $child.classList.add('selected');
      } else {
        $child.classList.remove('selected');
      }
    }
  }
});

这段代码在大约 3 分钟内拼凑在一起，不是最优的，应该在使用前进行审查。 您可以在 @ https://jsfiddle.net/z0gh7eck/2/看到它的实际效果。

Answer 2

根据 jandy 对stackovweflow的回答。 没有“选择文本”的事件。 但是你可以绑定mouseup事件来检查是否有选择然后添加一个 class。