正文

js & right click menu & 鼠标滑词

IP云
IP云V管理员/2 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js & right click menu & 鼠标滑词 


    // 鼠标滑词

    mouseSlipGetWords() {

        const getSelectionText = () => {

            let selectedTextWithTrim = ``;

            if (window.getSelection){

                // all modern browsers and IE9+

                selectedTextWithTrim = window.getSelection().toString().trim();

                // console.log(`you selected text with trim() =`, selectedTextWithTrim);

            } else {

                console.error(`鼠标滑词 selectedText is empty!`);

            }

            return selectedTextWithTrim;

        };

        let textarea = document.querySelector(`#audit-common-handle-text`);

        let that = this;

        if (document.addEventListener) {

            // IE >= 9; other browsers

            textarea.addEventListener('contextmenu', function(e) {

                let value = getSelectionText() || "";

                if (value) {

                    that.$hMessage.success(`滑动选取的单词: ${value}`);

                    // that.isNewAddLabel = true;

                    // that.tableLoading = true;

                    that.commonHandleModalTableData = [];

                    that.searchValue = value;

                    // update value with auto click

                    that.getLabelCategories(``, ``);

                    that.onClickSearch();

                    setTimeout(() => {

                        // show modal with delay

                        that.modalNew.showModal = true;

                    }, 0);

                } else {

                    console.log(`selected text is empty!`);

                    that.$hMessage.error(`滑动选取的单词不可为空`);

                    // this.$hMessage.info(`滑动选取的单词不可为空`);

                }

                e.preventDefault();

            }, false);

        } else {

            // IE < 9

            document.attachEvent('oncontextmenu', function() {

                // alert("You've tried to open context menu");

                window.event.returnValue = false;

            });

        }

    },

&copyxgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

js & right click menu & 鼠标滑词的更多相关文章
  1. js & right click menu

    js & right click menu https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-clic ...

  2. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  3. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  4. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. 鼠标滑过弹出jquery在线客服

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  8. jquery鼠标滑过提示title具体实现代码

    jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...

  9. 鼠标滑过元素，div显示，并根据scrollTop向下移动

    如上图所示,通道有很多个,表格只有一个. 注意:滑过通道时鼠标如果停留在上面,那么表格才显示,鼠标滑过表格时,表格不消失 <div id="lineContent"> ...

随机推荐
  1. 20155334 2016-2017-2《Java程序设计》课程总结

    20155334 2016-2017-2<Java程序设计>课程总结 1. 每周作业链接汇总 题目 主要内容 二维码 预备作业1 不知道所以然的第一次博客 预备作业2 有关之前的C语言的调 ...

  2. noone is not in the sudoers file ubuntu

    Login as root or su to get root prompt type visudo an editor will open find a line says root ALL=( ...

  3. Hibernate 3.0 HelloWorld

    说明 基于Hibernate 3.0,Mysql5.0,java jdk 1.7,运行需要的lib 库,从http://files.cnblogs.com/HCCZX/Hibernate_Lib.ra ...

  4. odoo学习之:【转】控制menuitem的显示权限

    作者原文:https://blog.csdn.net/wangnan537/article/details/43992771 在实际应用Odoo(OpenERP)的过程中, 会有对某用户组隐藏菜单的需 ...

  5. ABP 框架集成EF批量增加、删除、修改只针对使用mmsql的

    AppService 层使用nuget 添加 EFCore.BulkExtensions 引用 using Abp.Application.Services.Dto; using Abp.Domain ...

  6. MyBatis.Net 配置

    假设我们现在有这样的需求,要对学生信息进行管理 学生表有要以下要求 字段名称 数据类型 说明 stuNo 字符 学号,该列必填,为主键递增 stuName 字符 学生姓名,该列必填,要考虑姓氏可能是两 ...

  7. Maven学习(十三)-----Maven 构建生命周期

    Maven 构建生命周期 构建生命周期是什么? 构建生命周期阶段的目标是执行顺序是一个良好定义的序列. 这里使用一个例子,一个典型的 Maven 构建生命周期是由下列顺序的阶段: 阶段 处理 描述 准 ...

  8. MySQL☞左外链接与右外连接

    外链接查询:即要查询有关联关系的数据,还要查询没有关联关系的数据.(个人理解为:表A和表B两个关联的列中)如下图: emmm,简单的来说两个表的关联关系:book.bid=bookshop.id,他们 ...

  9. TPO 03 - Architecture

    TPO 03 - Architecture Architecture is the art and science of designing structures that[主语是Architectu ...

  10. 微信 msg_sec_check接口PHP 调用

    $checkContent = '要检测的内容'; $url = 'https://api.weixin.qq.com/wxa/msg_sec_check?access_token='. $res[& ...

相关阅读

目录[+]