实现点击鼠标右键时出来菜单代码如下：
主要运用oncontextmenu事件，oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标右键功能</title>
<link rel="stylesheet" href="1.css">
<!-- <script type="text/javascript" src="1.js"></script> -->
</head>
<body>
<ul id="menu">
<li>删除</li>
<li>变成红色</li>
<li>变成绿色</li>
<li>恢复原色</li>
<li>移到最后</li>
<li>移到最前</li>
<li><a href="http://news.baidu.com/" target="_blank" style="text-decoration: none;">搜索新闻</a></li>
</ul>
<ul id="ul1">
<li title="请点击鼠标右键">习主席定调2018中国经济，要干这些大事</li>
<li title="请点击鼠标右键">国台办：坚决惩治电信诈骗犯罪 切实维护两岸同胞利益</li>
<li title="请点击鼠标右键">北大将每年增加５００万元经费支持马克思主义学院建设</li>
<li title="请点击鼠标右键">韩媒：韩军方已经计划向美增购20架F-35A隐形战斗机</li>
<li title="请点击鼠标右键">大学教师论文抄袭被撤稿 当事人：文学都是相似的</li>
<li title="请点击鼠标右键"> 冒雨退礼书记落马 同学曾劝：没50万存款做什么官</li>
<li title="请点击鼠标右键">男子寄万元茶叶外包装破损快递公司：赔6倍运费</li>
</ul>
<script>
window.onload=function (){
var content=document.getElementById('ul1').children;
var menu=document.getElementById('menu');
var menuli=menu.children;
for (var i=0; i<content.length; i++)
{
content[i].oncontextmenu=function (ev){
var event=ev||window.event;
menu.style.display='block';
menu.style.left=event.clientX+'px';
menu.style.top=event.clientY+'px';
var _this=this;
menuli[0].onclick=function (){
_this.parentNode.removeChild(_this);
};
menuli[1].onclick=function(){
_this.style.background="red";
};
menuli[2].onclick=function(){
_this.style.background="green";
};
menuli[3].onclick=function(){
_this.style.background="#ccc";
};
menuli[4].onclick=function(){
// var clone=_this.cloneNode(true);
var parent=_this.parentNode;
parent.removeChild(_this);
parent.appendChild(_this);
};
menuli[5].onclick=function(){
// var clone=_this.cloneNode(true);
var parent=_this.parentNode;
parent.removeChild(_this);
parent.insertBefore(_this,parent.firstChild);
};
return false; //阻止默认操作点击右键时不出现本身鼠标右键的菜单
};
}
document.onclick=function (){
menu.style.display='none';
};
};
</script>
</body>
</html>
css代码如下：
* { margin:0; padding:0; list-style:none; } #ul1 li { width:480px; background:#ccc; border:1px solid black; margin:10px; float:left; line-height:30px; text-indent:20px; cursor: pointer; } #menu { width:120px; border:1px solid black; position:absolute; left:0; top:0; display:none; background:white; cursor: pointer; text-indent: 20px; } #menu li { padding:3px; } #menu li:hover { background:#ccc; } #menu a{ color: black; }