js 监听文字鼠标选中

刺骨的言语ヽ痛彻心扉 2023-06-26 15:28 1阅读 0赞

如果你在浏览器中安装了翻译插件的话，控制台可能会输出你选中的文本内容，那么这是如何做到的呢？

直接查看他的源码，主要是使用了window.getSelection 这个属性

所以我们也可以仿照着写一个函数，用来监听鼠标双击，或者鼠标抬起事件：

// 监听双击事件  
document.addEventListener("dblclick", doubleClick, true);

// 监听释放鼠标按钮事件  
document.addEventListener("mouseup", mouseUp, true);

// 双击处理函数  
function doubleClick() \{  
    var text = "";  
    if (window.getSelection) \{  
        text = window.getSelection().toString();  
    \} else if (document.selection && document.selection.type != "Control") \{  
        text = document.selection.createRange().text;  
    \}  
    if ("" != text) \{  
        console.log(text);  
    \}

\}

// 释放鼠标处理函数  
function mouseUp() \{  
    var text = "";  
    if (window.getSelection) \{  
        text = window.getSelection().toString();  
    \} else if (document.selection && document.selection.type != "Control") \{  
        text = document.selection.createRange().text;  
    \}  
    if ("" != text) \{  
        console.log(text);  
    \}  
\}  
  
有点BUG，双击会触发鼠标抬起事件，所以会输出两遍；选中文本在取消选中也会输出。。

转载：https://blog.csdn.net/u014291497/article/details/52717353

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关【Layui】------- checkbox 监听选中并取消其它选中

> <input type="checkbox" lay-skin="primary" class="checkboxs" lay-filter="checkboxs"

末蓝、/ 2023年07月01日 06:26/ 0 赞/ 8 阅读

相关 js获取鼠标选中的文字

定义需要获取的内容的节点： <span onClick="SelectText()">河中鱼类离奇死亡，下游居民频染怪病，沿岸植物不断变异，是残留农药？还是

r囧r小猫/ 2023年06月26日 15:28/ 0 赞/ 119 阅读

相关 js 监听文字鼠标选中

如果你在浏览器中安装了翻译插件的话，控制台可能会输出你选中的文本内容，那么这是如何做到的呢？直接查看他的源码，主要是使用了window.getSelection 这个属性

刺骨的言语ヽ痛彻心扉/ 2023年06月26日 15:28/ 0 赞/ 2 阅读

相关 select事件监听及选中

change事件 <select onchange="selectChange(this)> <option value="500">500米</option>

喜欢ヅ旅行/ 2022年10月06日 00:41/ 0 赞/ 238 阅读

相关 js获取鼠标焦点位置并选中一部分文字

<body> <textarea id="divt">123456789</textarea> </body> <script

谁践踏了优雅/ 2022年07月27日 12:00/ 0 赞/ 235 阅读

相关 angular监听鼠标,键盘事件

关键词:$event 监听鼠标事件 <button (click)="onClick($event)"></button> $event 输出: Mous

以你之姓@/ 2022年05月20日 06:44/ 0 赞/ 676 阅读

相关获取鼠标选中文字

原博地址:http://www.cnblogs.com/NetSos/archive/2011/02/14/1954345.html 本文关键点： document.sel

悠悠/ 2022年05月20日 04:41/ 0 赞/ 256 阅读

相关 javascript 选中文字的实现

javascript 选中文字的实现浏览器有Api支持吗？浏览器有Api支持吗？ 1. window.getSelection 获取选中文字 2.

我不是女神ヾ/ 2022年04月16日 06:40/ 0 赞/ 275 阅读

相关 JavaScript键盘鼠标监听功能

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结. KeyboardEvent KeyboardEvent 对象描述了键盘的交互

朱雀/ 2022年01月22日 05:39/ 0 赞/ 559 阅读

相关 js获取鼠标选中的文字

定义需要获取的内容的节点： <span onClick="SelectText()">河中鱼类离奇死亡，下游居民频染怪病，沿岸植物不断变异，是残留农药？还是

末蓝、/ 2021年06月26日 16:06/ 0 赞/ 530 阅读