点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏
<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />
<div id="pop" class="centerDiv radius" style="width: 260px; height: 100px; border:1px solid #ddd; background:#f7f7f7; color:#000;">
当点击按钮后显示隐藏层,满足鼠标在div里操作不隐藏,在外边点击会消失的功能。
逻辑上主要是阻止浏览器的冒泡<br />
<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>
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: vue中点击空白处隐藏div的实现(用指令优雅的实现)
- 下一篇: jquery实现点击空白处隐藏弹框