在你的项目中添加jQuery鼠标的魔法——构建交互式右键菜单！

jQuery实现鼠标右键菜单

功能：新建、复制、剪切、粘贴、删除

css
.div1{background-color: skyblue;}.div2{border: 1px solid #000000;}

// 菜单选项var arr=["新建","复制","剪切","粘贴","删除"];var prev, clones;// 创建ul标签元素放在body中// 设置css样式var ul=$("<ul></ul>").appendTo("body").css({
    listStyle:"none",
    margin:0,
    padding:0,
    display:"none",
    zIndex:1,
    position:"absolute",
    backgroundColor:"white"// 添加鼠标离开事件}).on("mouseleave",function(){// 当鼠标离开列表元素时，设置隐藏$(this).css("display","none");});// 遍历数组创建li标签元素，设置样式
$.each(arr,function(index,item){// 创建li标签元素，并将数组里面的每一项内容添加进行// 添加ul元素中，设置css样式$("<li>"+item+"</li>").appendTo(ul).css({
        border:"1px solid #000000",
        padding:"10px 20px",
        borderTop: index ===0?"1px solid #000000":"none",// 鼠标滑过，添加类名，设置样式}).hover(function(){$(this).addClass("div1");},function(){$(this).removeClass("div1");// 添加点击事件}).on("click",function(e){
        ul.css("display","none");// 点击菜单功能// 根据数组中的文本内容是第几个去设置不同的功能switch(arr.indexOf($(this).text())){// 新建case0:// 新建元素执行函数createDiv(e);
                ul.css("display","none");break;// 复制case1:if(prev){// 复制元素
                    clones=prev.clone(true);}break;// 剪切case2:if(prev){// 复制元素后，在删除
                    clones = prev.clone(true);
                    prev.remove();
                    prev.removeClass("div2");
                    prev =null;}break;// 粘贴case3:// 当复制的元素存在时if(!clones)return;// 将元素添加到body中，设置位置
                clones.prependTo("body").css({
                    left: e.clientX -25,
                    top: e.clientY -25,})// 当点击元素时,添加边线,如果prev存在为真,将上一个进行删除清空if(prev){
                    prev.removeClass("div2");// 删除鼠标按下事件，只能选中一个进行移动
                    prev.off("mousedown");
                    prev=null;}
                prev=clones;
                prev.addClass("div2");
                clones=null;break;// 删除case4:// 点击选中的元素进行删除，清空if(prev){
                    prev.remove();
                    prev.removeClass("div2");
                    prev =null;
                    ul.css("display","none");}break;}})})// 鼠标右键菜单事件$(document).on("contextmenu",function(e){// 取消默认事件
    e.preventDefault();// 设置右键点击ul列表显示的位置，初始隐藏，鼠标右键摁下显示
    ul.css({
        left:e.clientX-10,
        top:e.clientY-10,
        display:"block",});});// 创建元素functioncreateDiv(e){// 每次点击菜单中新建，就创建div放入body中$("<div></div>").css({
        width:50,
        height:50,
        backgroundColor:function(){// 元素背景色随机return("#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"));},
        position:"absolute",
        left: e.clientX-25,
        top: e.clientY-25,}).prependTo("body").on("click",function(){// 当点击元素时,添加边线,如果prev存在为真,将上一个进行删除清空if(prev){
            prev.removeClass("div2");// 删除鼠标按下事件，只能选中一个进行移动
            prev.off("mousedown");
            prev=null;}// 添加div2类名,设置边框
        prev=$(this);
        prev.addClass("div2");// 鼠标按下事件
        prev.on("mousedown",function(e){
            e.preventDefault();// 鼠标移动事件$(document).on("mousemove",function(e1){
                prev.css({// 设置元素移动的位置// 点击位置距离当前body可视区域的x，y坐标减去当前目标对象的左上角位置
                    left:e1.clientX-e.offsetX,
                    top:e1.clientY-e.offsetY,});});// 鼠标松开时，删除鼠标按下事件和松开事件$(document).on("mouseup",function(e2){$(document).off("mousemove mouseup");})})})}