Question

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

对于移动浏览器，我在DOM上绑定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);
})

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

1 个答案: