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