专栏首页前端菜鸟变老鸟JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)

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 条评论
登录 后参与评论

相关文章

  • setTimeout定时器以及部分小知识点

    思路:加一个标记flag,开始执行之后改变flag为原来的值并启动定时器,暂停的时候改变flag的值。

    从入门到进错门
  • 使用Vue做一个可自动拼图的拼图小游戏(一)

    随着几个项目的提测,也闲下来了,恰好玩了一把拼图游戏,于是突发奇想打算自己写一个试试。 最终效果如下图:

    从入门到进错门
  • ES6(一):let和const

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/835...

    从入门到进错门
  • 前端课程——盒子模型

    盒子模型又称为框模型,HTML页面所有的元素都具有盒子模型,该模型用于设计HTML页面和实现HTML页面布局。

    Dreamy.TZK
  • 前端|如何用HTML打印一个六边形

    六边形在我们网页的制作中,运用得并不是特别广泛。但在一些制作精美,要求创新的一些网页上,我们还是不难看到六边形的身影,如下图1.1所示。用六边形组合的蜂窝状图形...

    算法与编程之美
  • VUE开发一个组件——Vue PC城市选择控件

    前面用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的?其实和H5相同,样式不同而已。

    Javanx
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • 30 个案例教你用纯 CSS 实现常见的几何图形

    我们知道,如果设置一个盒子的宽高为 0,盒子就会变成一个点。此时再给上下左右四个 border 一定的宽度和不同的颜色,那么单纯由 border 填充的盒子看起...

    Chor
  • 谈响应式web设计代码实现

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

    RP道貌不岸然
  • CSS基本知识(慕课网)

    听着music睡

扫码关注云+社区

领取腾讯云代金券