console
const getPosition = (target) => {
const top = document.documentElement.scrollTop || document.body.scrollTop;
const left = document.documentElement.scrollLeft || document.body.scrollLeft;
return {
x: left + target.clientX,
y: top + target.clientY
}
};
document.getElementById("ddd").oncontextmenu = (e) => {
const html = document.getElementById('rightMenu');
const pos = getPosition(e);
html.style.cssText = `
display:block;
left: ${pos.x}px;
top: ${pos.y}px
`;
return false;
};
document.onclick= (e) => {
oUl = document.getElementById('rightMenu');
const { index } = e.target.dataset;
const evArr = ['已复制到剪贴板', '粘贴成功', '刷新成功'];
oUl.style.display='none';
};
function contextmenu(e){
const html = document.getElementById('rightMenu');
const pos = getPosition(e);
html.style.cssText = `
display:block;
left: ${pos.x}px;
top: ${pos.y}px
`;
return false;
}
<ul style="display:none;" id="rightMenu" class="contextmenu">
<li><a href="#" data-index="0">健康</a></li>
<li><a href="#" data-index="1">快乐</a></li>
<li><a href="#" data-index="2">财富</a></li>
<li><a href="#" data-index="3">自由</a></li>
<li><a href="#" data-index="4">幸福</a></li>
</ul>
<div id = "ddd">123</div>
<table>
<tr oncontextmenu="contextmenu(event)">
<td>123
</td><td>123
</td><td>123
</td><td>123
</td><td>123
</td><td>123
</td><td>123
</td>
</tr>
</table>
.contextmenu { display: none; position: absolute; width: 200px; margin: 0; padding: 0; background: #FFFFFF; border-radius: 5px; list-style: none; box-shadow: 0 15px 35px rgba(50,50,90,0.1), 0 5px 15px rgba(0,0,0,0.07); overflow: hidden; z-index: 999999; }
.contextmenu li { border-left: 3px solid transparent; transition: ease .2s; }
.contextmenu li a { display: block; padding: 10px; color: #B0BEC5; text-decoration: none; transition: ease .2s; }
.contextmenu li:hover { background: #CE93D8; border-left: 3px solid #9C27B0; }
.contextmenu li:hover a { color: #FFFFFF; }