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

最新推荐文章于 2021-08-02 20:42:12 发布

清欢灬

最新推荐文章于 2021-08-02 20:42:12 发布

阅读量1.5k

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/a754334599/article/details/113045398

版权

功能分析：

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>

清欢灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标右键菜单-复制删除粘贴剪切

功能分析：1、鼠标右键点击元素节点，如果没有选中元素节点中的内容，则点击复制会复制整个元素节点2、如果元素节点内容被选中则复制元素节点中选中的内容3、点击剪切，复制元素节点，删除原有节点4、点击粘贴则会把复制的内容粘贴到鼠标点击的位置5、点击删除会删除点击的节点代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
复制链接

扫一扫