如何使用javascript触摸事件在触摸屏上选择文本答案

【问题标题】：How to use javascript touch events to select text on touchscreen如何使用javascript触摸事件在触摸屏上选择文本
【发布时间】：2021-07-20 21:10:29
【问题描述】：

我有这个带有 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()        
        });

谢谢！

【问题讨论】：

标签： javascript highlight touch-event textselection getselection

【解决方案1】：

您正在寻找selectionchange 事件！

无论如何选择文本（通过鼠标、触摸、键盘或特殊设备），它都会检测选择的变化。

它不会告诉您选择了哪个元素（您必须手动确定它），也不会表明用户已完成选择，但每次选择更改时都会触发它（您可能想要在弹出窗口出现之前添加一些超时）：

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

&lt;div class="myDiv"&gt;Some text that you can select&lt;/div&gt;

【讨论】：