html右键菜单编写,使用HTML5的contentmenu事件实现自定义右键菜单的功能

contextmenu事件：用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单

DOM3 event textInput

#myMenu{

position: absolute;

background: #eee;

border: 1px solid #f00;

list-style: none;

visibility: hidden;

}

右键单击或者CTRL+单击获取自定义菜单，单击其他地方获取默认的菜单

• 百度
• 新浪
• 腾信

window.onload = function(){

document.getElementById('myDiv').addEventListener('contextmenu',function(e){

e.preventDefault();//取消浏览器默认行为，以保证不显示浏览器默认的上下文菜单

var menu = document.getElementById('myMenu');

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

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

menu.style.visibility = 'visible';

},false);

document.addEventListener('click',function(){

var menu = document.getElementById('myMenu');

menu.style.left = "0px";

menu.style.top = "0px";

menu.style.visibility = 'hidden';

},false);

}

效果如下所示

自定义右键菜单的效果