使用 JavaScript 获取鼠标光标移动的焦点元素

Question

当我单击任何块时，它会添加一个新类.is-selected。当我通过单击块获得焦点时，它工作正常。但是当我使用箭头键将焦点放在另一个块上时它不起作用。使用箭头键时如何获得焦点？

let getBlocks = document.querySelectorAll(".block");

getBlocks.forEach((single) => {

  single.addEventListener("focus", () => {

    //remove all activated class

    getBlocks.forEach((x) => {

      x.classList.remove("is-selected");

    });

    

    //add the class to this new focus block

    single.classList.add("is-selected");

  });

});

* {

  box-sizing: border-box;

}

.root {

  max-width: 600px;

  margin: 1rem auto;

}

.root:focus,

.block:focus {

  outline: 0;

}

.is-selected {

  background-color: #f4f8ff !important;

  border: 1px solid #deebff !important;

}

<div class="root" contenteditable>

  <p name="jYdi0" class="block" tabindex="0">1</p>

  <p name="Hdy89" class="block" tabindex="0">2</p>

  <p name="wEldk" class="block" tabindex="0">3</p>

</div>

Answer 1

更新 ：var ind = 0;let getBlocks = document.querySelectorAll(".block");function caretInfo(up = true) {&nbsp; let sel = window.getSelection();&nbsp; let offset = sel.focusOffset;&nbsp; if (up) {&nbsp; &nbsp; sel.modify("move", "backward", "character");&nbsp; &nbsp; if (offset == sel.focusOffset) return true;&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; sel.modify("move", "forward", "character");&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; } else {&nbsp; &nbsp; sel.modify("move", "forward", "character");&nbsp; &nbsp; if (offset == sel.focusOffset) return true;&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; sel.modify("move", "backward", "character");&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; }}function selection(item) {&nbsp; getBlocks.forEach((x, index) => {&nbsp; &nbsp; if (x === item) {&nbsp; &nbsp; &nbsp; ind = index;&nbsp; &nbsp; }&nbsp; &nbsp; x.classList.remove("is-selected");&nbsp; });&nbsp; //add the class to this new focus block&nbsp; item.classList.add("is-selected");}getBlocks.forEach((item) => {&nbsp; item.addEventListener('focus', () => {&nbsp; &nbsp; selection(item);&nbsp; });});document.addEventListener("keydown", function(event) {&nbsp; let change = false;&nbsp; if (event.keyCode == 38 || event.keyCode == 40) {&nbsp; &nbsp; if (event.keyCode == 38 && ind > 0) {&nbsp; &nbsp; &nbsp; change = caretInfo();&nbsp; &nbsp; &nbsp; if (change) {&nbsp; &nbsp; &nbsp; &nbsp; ind--;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else if (event.keyCode == 40 && ind < document.querySelectorAll('.root p').length - 1) {&nbsp; &nbsp; &nbsp; change = caretInfo(false);&nbsp; &nbsp; &nbsp; if (change) {&nbsp; &nbsp; &nbsp; &nbsp; ind++;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if (change) {&nbsp; &nbsp; &nbsp; let cur = document.querySelectorAll('.root p')[ind];&nbsp; &nbsp; &nbsp; cur.focus();&nbsp; &nbsp; }&nbsp; }})* {&nbsp; box-sizing: border-box;}.root {&nbsp; max-width: 600px;&nbsp; margin: 1rem auto;}.root:focus,.block:focus {&nbsp; outline: 0;}.is-selected {&nbsp; background-color: #f4f8ff !important;&nbsp; border: 1px solid #deebff !important;}<div class="root">&nbsp; <p name="jYdi0" class="block" tabindex="0" contenteditable>1</p>&nbsp; <p name="Hdy89" class="block" tabindex="0" contenteditable>It was single line but now it's multiple line Just amazine what can be happen here. Here is the problem try to click "me" and then press arrow up. Ops :( but it should be on the first line</p>&nbsp; <p name="wEldk" class="block" tabindex="0" contenteditable>lorem ipsumlorem ipsumlorem ipsum3</p></div>

Answer 2

你也可以做类似的事情&nbsp; &nbsp;document.addEventListener("keypress", (event) => {&nbsp; &nbsp; &nbsp; &nbsp;if(event.which === someEventCode) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// your code here&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; })在这里，someEventCode变量对于不同的按键是不同的。