首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。
阻止冒泡：1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true，对于IE浏览器，
而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation();
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
$("#info").hide();
$("#MoreContent").hide();
}
$('#openUserInfo').bind("click", function (e) {
if ($("#info").css("display") == "none") {
$("#info").show();
} else {
$("#info").hide();
}
e = e || event; stopFunc(e);
});
//阻止向上传递事件
$('#info').bind("click", function (e) {
e = e || event; stopFunc(e);
});
}
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
</script>
<style type="text/css">
#info {
display: none;
width: 180px;
height: 300px;
background-color: gray;
}
</style>
</head>
<body>
<div class="top_menu">
<div class="right_div">
<a id="openUserInfo" href="javascript:void(0)">
<div class="head_portrait">设置</div>
</a>
</div>
</div>
<div id="info">
<div>
<ul>
<a role="menuitem" tabindex="-1" href="http://www.baidu.com">
<li>
浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
最主要的是点这个div里面的链接，div照样不隐藏
</li>
</a>
<a role="menuitem" tabindex="-1" href="http://www.baidu.com">
<li>
百度
</li>
</a>
<a href="/Login/LoginOut" onclick="return confirm('确定退出统一?');">
<li>
退出
</li>
</a>
</ul>
</div>
</div>
</body>
</html>
|
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具