html添加右键菜单,JS添加右键菜单

在前端开发的时候，会用到“右键菜单”，如给div添加右键菜单等，

示例：

代码如下：

.s-move-content-outer{border:1px black solid;width:200px;height:200px;position:relative;outline:none;user-select:none;/*overflow:hidden;*/;}

.vpopmenu{

position:absolute;

width:200px;

border-radius:5px;

background-color:rgba(13,78,146,0.9);

border:rgb(13,78,146);

z-index:9999;

padding:2px;

display:none;

}

.vpopmenu>div{

padding:2px 2px 2px 30px;

height:24px;

}

.vpopmenu > div:hover {

background-color:rgba(245, 239, 89, 0.30);

}

div1

内容1

新增

页内复制

删除

bindMenu();

var menu = document.getElementById("r_menu");

function bindMenu(){

//给所有class=s-move-content-outer的div都加上右键菜单

var $BIPanel = $("div[class='s-move-content-outer']").contextmenu(function(ev) {

var oEvent = ev || event;

//自定义的菜单显示

menu.style.display = "block";

//让自定义菜单随鼠标的箭头位置移动

menu.style.left = oEvent.clientX + "px";

menu.style.top = oEvent.clientY + "px";

//return false阻止系统自带的菜单，

//return false必须写在最后，否则自定义的右键菜单也不会出现

return false;

});

}

//实现点击document，自定义菜单消失

document.onclick = function() {

menu.style.display = "none";

}