功能点:右击阻止默认事件 根据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>