JS自定义右键菜单—复制到粘贴板（jQuery和原生JS实现）
JS自定义右键菜单—复制到粘贴板（jQuery和原生JS实现）
从入门到进错门
发布于 2018-08-21 16:36:09
发布于 2018-08-21 16:36:09
文章被收录于专栏：前端菜鸟变老鸟
自定义右键菜单——复制到粘贴板
需求：
- 鼠标在li标签上点击右键出现菜单，主要是复制等功能
- 屏蔽浏览器默认右键点击事件
- 右键菜单出现在鼠标点击的位置
- 点击屏幕其他位置菜单消失
- 点击之后有回调
实现：
1、使用jQuery - 右键菜单插件contextMenu
- 在项目中引入
jquery.contextMenu.js和jquery.contextMenu.css， 同时 contextMenu 依赖 jQuery。 - 初始化插件 $.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";
}
}结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年07月13日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
