在突出顯示的元素上添加 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。