如何使用JavaScript触摸事件在触摸屏上选择文本

Question

我有一个带有jQuery的JavaScript代码片段用于在连接了鼠标和键盘的电脑屏幕上完成工作:

开始在屏幕上选择文本：

   $("body").on("mousedown", ".myDiv", async function(e) {
           //do something
    });

当屏幕上的文本选择完成时：

$("body").on("mouseup",".myDiv", function(e) {
        //do something, e.g. windows.getSelection()        
    });

在计算机屏幕上，它看起来像这样： 在移动设备屏幕上，它看起来像这样： 在移动设备上，会发生两件事情，在计算机屏幕上并不会发生：

- 用于修改选择文本的两个手柄 - 用于对选择文本执行操作的菜单

如何实现与计算机屏幕相同的结果，即如何模拟 mouseup 事件以向浏览器明确指示我已完成选择？

我已经尝试过：

 $("body").on("touchstart",".myDiv", function(e) {
        //do something, e.g. windows.getSelection()        
    });
 $("body").on("touchend",".myDiv", function(e) {
            //do something, e.g. windows.getSelection()        
        });

谢谢！

- Villads Claes

Answer 1

你正在寻找 selectionchange 事件！

它可以检测选择的更改，无论是通过鼠标、触摸、键盘还是特殊设备进行选择。

它不会告诉你哪个元素被选中了（你需要使用 document.getSelection() 手动确定），也不会提示用户完成选择，但每次选择更改时都会触发它（在弹出窗口出现之前可能需要添加一些超时）。

document.addEventListener("selectionchange", function(e) {
  //do something, e.g. document.getSelection()        
  console.log("selectionchange")
});

<div class="myDiv">Some text that you can select</div>

- FZs