菜单
<style>
#menu { position:absolute; background:white; border:1px solid gray; width:100px; display:none; }
#menu div:hover { background:#ddd; }
</style>
<div id="menu"><div>编辑</div><div>删除</div></div>
长按显示菜单
https://www.5axxw.com/questions/simple/nyzvs3
var timer;
var img = document.createElement('img');
img.src = 'icon.png';
img.style.width = '50px';
img.style.height = '50px';
img.addEventListener('contextmenu', function(e){
e.preventDefault(); // 阻止默认右键菜单弹出
});
img.addEventListener('mousedown', function(e){
timer = setTimeout(function(){
menu.style.display = 'block';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
}, 500);
});
img.addEventListener('mouseup', function(e){
clearTimeout(timer);
});
区域外点击隐藏菜单
document.addEventListener('click', function(e){
var rect = menu.getBoundingClientRect();
if (e.pageX < rect.left || e.pageX > rect.right || e.pageY < rect.top || e.pageY > rect.bottom)
menu.style.display = 'none';
});