在前端開發的時候，會用到“右鍵菜單”，如給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";

}

總結

以上是生活随笔為你收集整理的html添加右键菜单,JS添加右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。