在Bootstrap下用JavaScript自定义右键菜单
其实不用Bootstrap也行的,纯属为了好看……
首先要在需要弹出右键菜单的地方屏蔽掉浏览器默认的右键菜单:
123
然后写showmenu这个函数:
function showmenu(){
document.getElementById("tree").onmousedown = function(e){
if(e.which == 3){
if (!e) {
e = window.event;
}else {
e.srcElement = e.target;
}
if(e.srcElement.innerHTML != ""){
document.getElementById("rightmenu").style.left = e.clientX + "px";
document.getElementById("rightmenu").style.top = e.clientY + "px";
document.getElementById("rightmenu").style.display = "block";
}
}
}
}
在body里写好右键菜单:
这里就用了Bootstrap里的一些CSS样式了。
为了让“菜单”及时消失掉,需要在JavaScript里加这么一个函数: 【在Bootstrap下用JavaScript自定义右键菜单】
function hiddenrightmenu(){
document.getElementById("rightmenu").style.display = "none";
}
然后在body标签里加上它:
这样右键菜单就可以及时弹出并隐藏了。