原生JS实现点击按钮显示悬浮窗并点击空白处隐藏

原生JS实现点击按钮显示悬浮窗并点击空白处隐藏

虽然jQuery提供了大量现成的悬浮窗插件，但由于公司项目不使用jQuery且缺乏相关插件支持，因此尝试自行实现该功能。具体实现思路完全基于个人理解，未参考其他现有方案。

以下是完整实现代码：

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementsByTagName('button')[0];
var flt = document.getElementsByTagName('div')[0];
btn.onclick = function(){
event.cancelBubble = true;
var x = btn.offsetLeft - 15 + 'px';
var y = btn.offsetTop - 100 + 'px';
flt.style.top = y;
flt.style.left = x;
flt.style.display = 'block';
} 
document.onclick = function(){
flt.style.display = 'none';
} 
} 
</script>
<style type="text/css">
*{ 
margin: 0px;
padding: 0px;
} 
div{
width: 60px;
height: 100px;
background: #33ccff;
display: none;
position: absolute;
} 
div ul{
text-align: center;
} 
div li{
list-style-type: none;
} 
button{
top: 300px;
left: 400px;
position: absolute;
} 
</style>
</head>
<body>
<button id="btn">Click</button>
<div>
<ul id="nav">
<li class="item1"><a href="">Demo 1</a></li>
<li class="item2"><a href="">Demo 2</a></li>
<li class="item3"><a href="">Demo 3</a></li>
<li class="item4"><a href="">Demo 4</a></li>
<li class="item5"><a href="">Demo 5</a></li>
</ul>
</div>
</body>
</html>

将上述代码保存为HTML文件即可在本地浏览器中测试运行。

需要特别说明的是event.cancelBubble属性的作用。本例需求为：点击按钮显示div，点击页面任意其他位置则隐藏div。由于JavaScript存在事件冒泡机制，当按钮触发onclick事件后，事件会向上冒泡至document节点，从而再次触发document的onclick事件，导致div立即隐藏，这与预期行为冲突。因此，必须通过设置event.cancelBubble = true来阻止事件冒泡，确保按钮点击后不会触发页面级的隐藏逻辑。整体实现较为简单，主要涉及基本DOM操作与事件处理。