关联: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()
}
});
效果如下 :