使用getBoundingClientRect()检测元素外点击

菜单

编辑
删除

长按显示菜单

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';
});