有没有办法订阅 window.getSelection 的变化？

Question

我们可以通过 获得一个选择范围window.getSelection()。我想知道是否有办法订阅window.getSelection更改。我想到的唯一方法是使用超时（这显然很糟糕）或订阅每个用户的键\鼠标按下事件并手动跟踪更改。

Answer 1

使用onselect事件。

function logSelection(event) {

  const log = document.getElementById('log');

  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);

  log.textContent = `You selected: ${selection}`;

}

const textarea = document.querySelector('textarea');

textarea.onselect = logSelection;

<textarea>Try selecting some text in this element.</textarea>

<p id="log"></p>

对于特定情况，例如span contenteditable，您可以制作一个 polyfill：

function logSelection() {

  const log = document.getElementById('log');

  const selection = window.getSelection();

  log.textContent = `You selected: ${selection}`;

}

const span = document.querySelector('span');

var down = false;

span.onmousedown = () => { down = true };

span.onmouseup = () => { down = false };

span.onmousemove = () => {

  if (down == true) {

    logSelection();

  }

};

<span contenteditable="true">Try selecting some text in this element.</span>

<p id="log"></p>

Answer 2

如果我以正确的方式取消描述，你想知道用户何时开始在页面上进行选择，你可以使用 DOM onselectstart。

document.onselectstart = function() {
  console.log("Selection started!");
};