关联：vue / react / angular / html / js / css
用的原生写的，在vue框架之类的地方则使用自己看着改改，两三下改好就能使用了，没啥难度的东西！
使用场景：自定义（定制）右键菜单内容，屏蔽浏览器的默认右键菜单。
写另一篇文章的时候，刚好碰到跟这个一起配合的东西，就先写下这个了。。。
#menus {width: 140px;padding: 3px 5px;background-color: #ffffff;display: none;/* display: flex; */flex-wrap: wrap;border: 1px solid #dadce0;border-radius: 2px;box-shadow: 1px 1px 2px #878787;position: fixed;user-select: none;}#menus div {display: flex;align-items: center;margin: 2px 0px;cursor: pointer;width: 100%;min-height: 26px;padding: 0px 8px;font-size: 14px;}#menus div:hover {background-color: #e8e8e9;}
<div id="menus"><div data-id="a">复制(ctrl + c)</div><div data-id="b">黏贴</div><div data-id="c">删除</div></div>
const menus = document.getElementById("menus");menus.addEventListener("click", (e) => {e.stopPropagation()});menus.addEventListener("contextmenu", (e) => { // 菜单要阻止默认事件冒泡e.stopPropagation()e.preventDefault();});document.addEventListener("contextmenu", (e) => {console.log(e, "全局鼠标右键事件");e.preventDefault();showMenu(e);});document.addEventListener("click", hideMenu, false); // 隐藏菜单function showMenu(e) {menus.style.top = `${e.clientY}px`;menus.style.left = `${e.clientX}px`;menus.style.display = "flex";}function hideMenu() {menus.style.display = "none";}const menusChild = document.querySelectorAll("#menus div");menusChild.forEach(item => {item.onclick = (e)=>{console.log(e.target.dataset.id, '元素');hideMenu()}});
效果如下 ：
