jquery/js 点击空白区域隐藏某一个层/元素

最新推荐文章于 2023-08-04 10:56:12 发布

优小U

最新推荐文章于 2023-08-04 10:56:12 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript html css 对话框隐藏

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.youkuaiyun.com/zy1281539626/article/details/78129188

Web前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一种通过点击按钮展示对话框并在点击页面空白处隐藏对话框的方法。使用了三种不同的JavaScript/jQuery实现方式，包括利用按钮的聚焦与失焦事件、阻止事件冒泡以及单次点击事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：点击一个按钮弹出一个对话框/气泡，点击空白区域隐藏对话框/气泡；

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();
});
//方法二点击`$(".tips")`不关闭
$(".tips").on("click",function(e){
  e.stopPropagation();
});
//方法三：适用所有的元素
$("#btn").on("click",function(e){
  $(".tips").show();
  $(document).one("click",function(){
    $(".tips").hide();
  });
  e.stopPropagation();
});
//方法三点击`$(".tips")`不关闭
$(".tips").on("click",function(e){
 e.stopPropagation();
});