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

本文主要是介绍使用getBoundingClientRect()检测元素外点击，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

菜单

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

这篇关于使用getBoundingClientRect()检测元素外点击的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---