js右击自定义菜单

最新推荐文章于 2024-08-05 22:35:36 发布
even_know
最新推荐文章于 2024-08-05 22:35:36 发布
阅读量581
点赞数 8
文章标签： javascript 前端 html
本文链接：https://blog.youkuaiyun.com/m0_71349739/article/details/135207112
版权
文章描述了一个使用JavaScript在网页中实现的功能，当用户在页面上选中文本时，右键点击会阻止默认行为，并根据`window.getSelection()`获取选中的文本，然后显示一个包含复制选项的菜单。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
功能点：右击阻止默认事件根据js提供方法window.getSelection()判断当前有值则出现菜单
<!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;
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: auto;
        }

        .cur {
            position: relative;
        }

        ul {
            padding: 5px 20px;
            position: absolute;
            display: none;
            background: red;
            z-index: 666;
            color: white;
            list-style: none;

            li {
                cursor: pointer;
            }
        }
    </style>
</head>

<body>
    <div class="cur">
        <div class="box"> </div>
        <ul>
            <li class="copy">复制</li>
            <li>1234</li>
            <li>444</li>
        </ul>
    </div>
    <script model="es6">
        const box = document.querySelector('.box')
        const str = "叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。叶辰欣赏着茶杯上的花纹，心中却冷意浮现：“不管如何，有谁敢对朝歌出手，抹杀了便是。";
        const ul = document.querySelector('ul')
        const copy = document.querySelector('.copy')
        var selectedText = ''
        box.innerText = str

        // 点击
        document.onclick = (e) => {
            if (e.target.className == 'copy') {
                const textarea = document.createElement('textarea');
                textarea.value = selectedText;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            }
            ul.style.display = 'none';
        }

        // 右击
        document.oncontextmenu = function (e) {
            e.preventDefault();
            selectedText = window.getSelection().toString()
            if (selectedText) {
                if (e.target.className == 'box') {
                    ul.style.top = e.offsetY + 'px';
                    ul.style.left = e.clientX + 'px';
                    ul.style.display = 'block';
                }
            } else {
                ul.style.display = 'none';
            }
        };
    </script>
</body>

</html>