正文
jq冒泡之——点击其他地方隐藏
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
e.stopPropagetion();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<style>
ul,li{padding:0;margin:0;}
li{list-style: none;}
.member-grounp{width:200px;height:200px;background:green;}
.member-grounp li span{width:50px;height:50px;background:red;display:block;}
/*挂断，发言，移除*/
.b_main{position:absolute;left:50%;top:50%;width:88px;}
.out{
position:absolute;
top:7px;
border-color:transparent #d9d9d9 transparent transparent;
border-style:dashed dashed solid dashed;
border-width:8px;
}
.dashed{
position:absolute;
border-color:transparent #ffffff transparent transparent;
border-style:dashed dashed solid dashed;
border-width:8px;
top:-8px;
left:-6px;
}
.mem-operation{
position:relative;
border:1px solid #d9d9d9;
padding:5px 0;
left:16px;
border-radius:5px;
background:white;
}
.mem-operation li{border-bottom:1px solid #d9d9d9;height:40px;line-height:40px;position:relative;text-align:right;cursor:pointer;padding:0 10px;}
.mem-operation li:last-child{border:0;}
.mem-operation li i{display:block;width:27px;height:23px;position:absolute;top:50%;margin-top:-11px;z-index: 2;}
.mem-operation li i.hangupI{background: url(../images/meeting.png) no-repeat;background-position:-143px -24px;}
.mem-operation li i.speakI{background: url(../images/meeting.png) no-repeat;background-position:-143px -48px;}
.mem-operation li i.removeI{background: url(../images/meeting.png) no-repeat;background-position:-143px -80px;}
</style>
</head>
<body>
<ul class="member-grounp">
<li>
<span class="m-icon"></span>
</li>
</ul>
<div class="b_main" id="meetingSet" style="display:none;">
<ul class="mem-operation">
<li><i class="hangupI" style=""></i>挂断</li>
<li><i class="speakI"></i>发言</li>
<li><i class="removeI"></i>移除</li>
</ul>
<div class="out">
<div class="dashed"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(".member-grounp").on('click',"li .m-icon",function (ev) {
var omeetingSet = document.getElementById("meetingSet");
// 获取event对象，兼容性写法
var ev = ev || event;
//判断显示
omeetingSet.style.display="block";
var mouseDownX = ev.clientX;
var mouseDownY = ev.clientY;
omeetingSet.style.left = mouseDownX+"px";
omeetingSet.style.top = mouseDownY+"px"; $(document).on("click", function(){
omeetingSet.style.display="none";
});
ev.stopPropagation();
});
$(".member-grounp").on('click',"li",function (ev) {
var ev = ev || event;
ev.stopPropagation();
});
</script>
