JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)

自定义右键菜单——复制到粘贴板

需求:

  1. 鼠标在li标签上点击右键出现菜单,主要是复制等功能
  2. 屏蔽浏览器默认右键点击事件
  3. 右键菜单出现在鼠标点击的位置
  4. 点击屏幕其他位置菜单消失
  5. 点击之后有回调

实现:

1、使用jQuery - 右键菜单插件contextMenu

  1. 在项目中引入jquery.contextMenu.jsjquery.contextMenu.css, 同时 contextMenu 依赖 jQuery。
  2. 初始化插件 $.contextMenu({ selector: 'li', callback: function(key, options) { var Url2 = $(this).text().trim(); var oInput = document.createElement('input'); oInput.value = Url2; document.body.appendChild(oInput); oInput.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 oInput.className = 'oInput'; oInput.style.display = 'none'; alert('成功复制到粘贴板'); }, items: { "copy": { name: "复制", icon: "copy" }, } });

搞定!成功复制到粘贴板。

contextMenu插件:GitHub 主页
contextMenu插件:使用方法

2、使用原生js手撸一个

直接上代码:

html:
<div id="Rmenu">
    <ul>
        <li>复制</li>
        <li>删除</li>
    </ul>
</div>
CSS:
 * {
        margin: 0;
        padding: 0;
    }

    #Rmenu {
        width: 80px;
        background: #00AAAA;
        position: absolute;
        display: none;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        -moz-box-shadow: 2px 2px 20px #333333;
        -webkit-box-shadow: 2px 2px 20px #333333;
        box-shadow: 2px 2px 20px #333333;
    }

    #Rmenu ul li:hover {
        font-size: 17px;
        background-color: #E1B700;
    }

    #Rmenu ul li {
        border-radius: 5px;
        list-style: none;
        margin: 5px;
        font-size: 16px;
    }
JS
window.onload = function() {
    var menu = document.getElementById("Rmenu");
    document.oncontextmenu = function(ev) {
        var ev = ev || event;
        menu.style.display = "block";
        menu.style.left = ev.clientX + "px";
        menu.style.top = ev.clientY + "px";
        //阻止默认右键事件
        return false;
    }
    document.onclick = function(e) {
        //click事件可以关闭右键菜单
        if (e.target.tagName.toLowerCase() === 'li') {
            console.log("您点击的是:" + e.target.outerText);
        }
        menu.style.display = "none"; 
    }
}

结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

图表的一些资源

Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。 ? Open...

2358
来自专栏编程坑太多

「小程序JAVA实战」 小程序远程调试(九)

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

1151
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

2948
来自专栏电光石火

防F12扒代码:按下F12关闭当前页面

<script>   function fuckyou(){       window.close(); //关闭当前窗口(防抽)      wind...

2536
来自专栏九彩拼盘的叨叨叨

HTML代码片段

3162
来自专栏蜉蝣禅修之道

Python获取本机所有网卡ip,掩码和广播地址

2165
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

1341
来自专栏Youngxj

[教程]替换win10状态栏及菜单,让win10加速开机

1812
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2956
来自专栏实战docker

Docker下安装Rockmongo,图形化操作mongodb

RockMongo是个web版的MongoDB管理工具,相比原始的命令行操作,RockMongo的图形化界面大大的提升的我们的工作效率,本章我们在Docker下...

3146

扫码关注云+社区

领取腾讯云代金券