使用jQuery实现右键菜单

var arr = ["新建", "复制", "剪切", "粘贴", "删除"];
var cloneDiv,selectDiv;
var ul=$("<ul></ul>").appendTo("body").css({
listStyle: "none",
margin: 0,
padding: 0,
position: "absolute",
display: "none",
zIndex: 999,
}).mouseleave(function(){
$(this).css("display","none");
});
$.each(arr,function(index,item){
$("<li></li>").appendTo(ul).css({
padding: "5px 15px",
backgroundColor: "skyblue",
userSelect: "none",
}).text(item).hover(
function(){
$(this).css("backgroundColor", "blue");
},function(){
$(this).css("backgroundColor", "skyblue");
}
).click(function(e){
switch(arr.indexOf($(this).text())){
case 0:
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
$("<div></div>").appendTo("body").css({
width: 50,
height: 50,
backgroundColor: "red",
position: "absolute",
left: e.clientX - 25,
top: e.clientY - 25,
}).click(function(){
selectDiv=$(this);
selectDiv.css("border", "1px solid #000000").mousedown(function(e){
var div=$(this);
e.preventDefault();
$(document).mousemove(function(e1){
div.css({
left: e1.clientX - e.offsetX,
top: e1.clientY - e.offsetY,
});
}).mouseup(function(){
$(this).off("mousemove mouseup");
})
}).siblings("div").css("border","none").off("mousedown");
});
break;
case 1:
cloneDiv=selectDiv.clone(true);
break;
case 2:
cloneDiv=selectDiv.clone(true);
selectDiv.remove();
selectDiv=null;
break;
case 3:
if(!cloneDiv) return;
selectDiv=cloneDiv;
selectDiv.appendTo("body").css({
left: e.clientX - 25,
top: e.clientY - 25,
}).siblings("div").css("border","none");
cloneDiv=null;
break;
case 4:
selectDiv.remove();
selectDiv=null;
break;
}
ul.css("display","none");
})
});

$(document).contextmenu(function(e){
e.preventDefault();
ul.css({
display: "block",
left: e.clientX - 10,
top: e.clientY - 10,
});
});