鼠标右键菜单-复制删除粘贴剪切

布满荆棘的人生 2023-01-10 10:06 257阅读 0赞

## 功能分析： ##

**1、鼠标右键点击元素节点，如果没有选中元素节点中的内容，则点击复制会复制整个元素节点**

**2、如果元素节点内容被选中则复制元素节点中选中的内容**

**3、点击剪切，复制元素节点，删除原有节点**

**4、点击粘贴则会把复制的内容粘贴到鼠标点击的位置**

**5、点击删除会删除点击的节点**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            div,
            p {
                width: 200px;
                height: 200px;
                border: 1px solid royalblue;
                margin-left: 10px;
                margin-top: 50px;
            }
            
            p {
                border: 1px solid red;
            }
            
            body {
                background-color: #eeee;
                height: 2000px;
            }
            
            ul {
                padding: 10px 0;
                display: none;
                border: 1px solid;
                list-style: none;
                box-shadow: 2px 1px 2px 2px rgba(0, 0, 0, .2);
                width: 140px;
                position: absolute;
                background-color: #fff;
            }
            
            li {
                font-size: 18px;
                /* text-align: center; */
                padding: 5px 0 5px 20px;
                line-height: 24px;
            }
            
            li:hover {
                background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
            }
            
            #son1 {
                width: 100px;
                height: 100px;
                background-color: salmon;
            }
            
            .center {
                margin: 0 auto;
                width: 800px;
                height: 800px;
                border: 1px solid aqua;
            }
        </style>
        <script>
            window.onload = function() {
                var box = document.querySelector("ul");
                var son = document.querySelector("#son");
                var f = document.querySelector(".f")
                    // 阻止右键菜单
                document.oncontextmenu = function(event) {
                        var event = event || window.event;
                        if (event.preventDefault) {
                            event.preventDefault();
                        } else {
                            event.returnValu = false;
                        }
                    }
                    // 自定义
                var div = null;
                var newDiv = null;
                var str = "";
                var boxs = null;
                document.onmousedown = function(event) {
                    var event = event || window.event;
                    var target = event.srcElement || event.target;
                    // 判断按下的是否为右键
                    if (event.button == 2) {
                        // 显示菜单
                        box.style.display = "block";
                        // 菜单位置等于，鼠标点击位置
                        box.style.left = event.pageX + "px";
                        box.style.top = event.pageY + "px";
                        if (target.nodeName != "BODY") {
                            str = SelectText();
                            console.log(str);
                            if (str) {
    
                            } else {
                                // 清除上次复制
                                str = "";
                                div = target;
                            }
                        }
                    } else if (event.button == 0) {
                        // 隐藏菜单
                        box.style.display = "none";
                        // 删除
                        if (target.className == "d") {
                            if (div != null) {
                                div.remove();
                            }
                        }
                        // 复制、粘贴
                        if (target.className == "f" || target.className == "c") {
                            // 点击复制
                            if (target.className == "f") {
                                // 清空中间变量
                                newDiv = null;
                                if (str) {
                                    //创建span存放复制的内容
                                    boxs = document.createElement("span");
                                    boxs.innerHTML = str;
                                }
                                if (div != null) {
                                    // 克隆点击元素节点
                                    newDiv = div.cloneNode(true);
                                }
    
    
                            } else if (target.className == "c") {
                                // 点击粘贴
                                if (str) {
                                    boxs = document.createElement("span");
                                    boxs.innerHTML = str;
                                    // 存放复制内容节点插入
                                    document.body.appendChild(boxs);
                                    // 根据鼠标箭头位置粘贴存放文字的节点
                                    boxs.style.position = "absolute";
                                    boxs.style.left = event.pageX + "px";
                                    boxs.style.top = event.pageY + "px";
                                } else if (newDiv != null) {
                                    newDiv = div.cloneNode(true);
                                    document.body.appendChild(newDiv);
                                    // 根据鼠标箭头位置粘贴节点
                                    newDiv.style.position = "absolute";
                                    newDiv.style.left = event.pageX + "px";
                                    newDiv.style.top = event.pageY + "px";
                                }
                            }
                        }
                        // 剪切
                        if (target.className == "j") {
                            newDiv = div.cloneNode(true);
                            div.remove();
                        }
                    }
                };
    
                function SelectText() {
                    try {
                        var selecter = window.getSelection().toString();
                        if (selecter != null && selecter.trim() != "") {
                            return (selecter);
                        }
                    } catch (err) {
                        var selecter = document.selection.createRange();
                        var s = selecter.text;
                        if (s != null && s.trim() != "") {
                            return s;
                        }
                    }
                }
                //替换文本前与后的空格
                String.prototype.trim = function() {
                    return this.replace(/(^\s*)|(\s*$)/g, "");
                }
            }
        </script>
    </head>
    
    <body>
        <ul id="box">
            <li class="f">复制</li>
            <li class="c">黏贴</li>
            <li class="j">剪切</li>
            <li class="d">删除</li>
        </ul>
        <div class="center">
            <div>时间不在于你拥有多少，而在于你怎样使用</div>
            <div>我曾踏足山巅，也曾跌落低谷，二者都让我受益良多</div>
            <p>断剑重铸之，骑士归来之时</p>
        </div>
    </body>
    
    </html>