javascript自定义右键菜单，js自定义右键删除——和派孔明

来源：互联网发布：虎嗅网源码下载编辑：程序博客网时间：2024/06/02 19:42

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content=" " />
<meta name="copyright" content="来自和派孔明——高级前端工程师" />
<title>来自和派孔明——高级前端工程师</title>
<style>
* {margin:0; padding:0; list-style:none;}

#ul1 li {width:400px; background:#CCC; border:1px solid black; margin:10px; float:left; line-height:30px; text-indent:1em;}

#menu {width:150px; border:1px solid black; border:1px solid black; position:absolute; left:0; top:0; display:none; background:white;}

#menu li {padding:3px;}
#menu li:hover {background:#CCC;}
</style>
<script>
window.onload=function(){
var oM=document.getElementById('menu');
var aLi=oM.children;
var oUl=document.getElementById('ul1');
var aLi1=oUl.children;

var _this=null;

for(var i=0;i<aLi1.length;i++){
aLi1[i].oncontextmenu=function(ev){
_this=this;
var oEvt=ev||event;
oM.style.display='block';
oM.style.left=oEvt.clientX+'px';
oM.style.top=oEvt.clientY+'px';
return false;
}
}
aLi[0].onclick=function(){
oUl.removeChild(_this);
}
aLi[1].onclick=function(){
_this.style.background='red';
}
aLi[2].onclick=function(){
_this.style.background='green';
}
aLi[3].onclick=function(){
_this.style.background='yellow';
}
aLi[4].onclick=function(){
_this.style.background='blue';
}

document.onclick=function(){
oM.style.display='none';
};
};
</script>
</head>

<body>
<ul id="menu">
<li>删除</li>
<li>变成红色</li>
<li>变成绿色</li>
<li>变成黄色</li>
<li>变成蓝色</li>
</ul>
<ul id="ul1">
<li>中国信保原副总戴春宁贪污、受贿、通奸被开除党籍</li>
<li>中纪委原书记贺国强考察贵阳孔学堂（图）</li>
<li>解放军报官微：胡锡进相关微博内容是胡说八道</li>
<li>刘汉向湖北省高院提出上诉已提交上诉状</li>
<li>澳洲公布疑似马航坠毁噪音或解MH370失踪之谜</li>
<li>曝京沪高铁上海段地面开裂10cm 回应称不影响运营</li>
<li>朝鲜宣传一农场已建成“社会主义世外桃源”(图)</li>
</ul>
</body>
</html>

0 0