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

Posted 2023-03-06

【中文标题】如何使用javascript触摸事件在触摸屏上选择文本

【英文标题】：How to use javascript touch events to select text on touchscreen

【发布时间】：2021-07-20 21:10:29

【问题描述】：

我有这个带有 jQ​​uery 的 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()        
        );

谢谢！

【参考方案1】：

您正在寻找selectionchange 事件！

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

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

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

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