仅针对特定元素的 JavaScript SelectionChange 事件

Question

我想在特定的 div 元素上实现 JavaScrit selectionchange 事件，因此如果用户从 DOM 中选择文本，我想显示一个荧光笔框。我已经通过 onmouseup 事件在网络上实现了这一点。但我一直在尝试为移动设备实现这一点。

对于移动浏览器，我在 DOM 上绑定(bind) document.selectionchange 事件，但我希望它仅适用于具有 content-editable 类的特定元素。因此，仅当用户在具有 content-editable 类的页面容器中选择文本时，荧光笔才会显示。

document.addEventListener("selectionchange", function(evt) { 
  // Now this functionality only apply for content-editable class div.
});

如何实现此功能？也许可以使用递归函数来实现，以查找所选文本的 parentElement 的 anchorNode 类，例如:

var selection = ctrl.window.getSelection();

最好的方法是什么？

Answer 1

听selectstart相反，您的目标元素的事件。仅当触发此事件时才获取选择。

const targetDiv = document.getElementById("interestingDiv");
function logSelection() {  
  console.log(document.getSelection().toString());
}
targetDiv.addEventListener("selectstart", () => {
  console.log("Selection started in targetDiv");
  document.addEventListener("selectionchange", logSelection);
});

一旦做出新的选择，selectstart 事件就会触发，因此您需要某种方法来在选择完成后获取该选择。我们可以监听 selectionchange，并通过某种方式在选择后停止监听。一种选择是停止监听 mouseleave:

targetDiv.addEventListener("mouseleave", () => {
 document.removeEventListener("selectionchange", logSelection);
})