javascript - javscript/jquery 点击页面其他地方关闭某个div？

问题描述

问 题

效果类似这样 ：

点击一个按钮，弹出一个div，在点击页面其他的位置时，关闭这个div。。。

目前是通过给document一个点击事件，然后关闭这个div。。（ps： 按钮已经阻止事件冒泡。所以不会触发document的事件）

但是我有点疑惑这种做法是否正确？

类似这样的效果还有其他的方式实现吗 ？

代码

<div id='a'></div>
<div id='b' class='hide'></div>


javascript:

$("#a").click(function(event){
    $("#b").show();
    event.stop..... （阻止事件冒泡）
});

$(document).click(function(){
$("#b").hide()
});

解决方案

大概是这个意思吧：

<style>
#a {
    width: 100px;
    height: 100px;
    background-color: blue;
}

#b {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.hide {
    display:none;
}
</style>
<div id=a></div>
<div id=b class='hide'></div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).click(tap);
function tap(ev) {
    if (ev.target == $('#a')[0]) {
        $('#b').removeClass('hide');
    } else {
        $('#b').addClass('hide');
    }
}
</script>

大概思路就是直接挂document的click事件，抓到以后对比下看是不是那个要点击的div就好了。

---

正不正确其实不是很重要；把功能做出来，能用没bug，那就是正确的。

这篇关于javascript - javscript/jquery 点击页面其他地方关闭某个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！