<div id="pop" class="centerDiv radius" style="width: 260px; height: 100px; border:1px solid #ddd; background:#f7f7f7; color:#000;">
当点击按钮后显示隐藏层,满足鼠标在div里操作不隐藏,在外边点击会消失的功能。
逻辑上主要是阻止浏览器的冒泡<br />
</div>
<script type="text/javascript">
//点击#btnClick时要阻止冒泡,否则.pop是不显示的,
//因为冒泡了,会执行到下面的方法。
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#btnClick").click(function (e) {
$("#pop").show();
stopPropagation(e);
});
$(document).bind('click', function () {
$("#pop").hide();
});
$("#pop").click(function (e) {
stopPropagation(e);
});
</script>
本文介绍如何使用原生JavaScript实现一个点击按钮后显示隐藏层的弹窗效果,并确保当鼠标在弹窗内操作时不关闭,而在弹窗外点击则会消失。主要通过阻止事件冒泡来实现。
1658

被折叠的 条评论
为什么被折叠?



