場景：點(diǎn)擊一個(gè)按鈕彈出一個(gè)對(duì)話框/氣泡，點(diǎn)擊空白區(qū)域隱藏對(duì)話框/氣泡；

html:

<button id="btn">按鈕</button> <div class="tips"></div>

css:

.tips{width: 100px;height: 100px;background: red;display: none; }

js:

//方法一：適用于按鈕(有聚焦、失焦事件) $("#btn").on("click",function(){$(".tips").show(); }); $("#btn").on("blur",function(){$(".tips").hide(); }); //方法二：適用所有元素 $("#btn").on("click",function(e){e.stopPropagation();$(".tips").show(); }); $(document).on("click",function(){$(".tips").hide(); }); //方法二點(diǎn)擊`$(".tips")`不關(guān)閉 $(".tips").on("click",function(e){e.stopPropagation(); }); //方法三：適用所有的元素 $("#btn").on("click",function(e){$(".tips").show();$(document).one("click",function(){$(".tips").hide();});e.stopPropagation(); }); //方法三點(diǎn)擊`$(".tips")`不關(guān)閉 $(".tips").on("click",function(e){e.stopPropagation(); });

效果如下：

總結(jié)

以上是生活随笔為你收集整理的jquery/js 点击空白区域隐藏某一个层/元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。