Jquery点击元素外的区域隐藏元素

已于 2022-01-30 00:19:43 修改
阅读量663 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： js/jquery 文章标签： jquery
于 2021-10-04 13:57:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sitetesty/article/details/120603493
这段代码定义了一个全局的点击事件监听器，当点击事件发生且目标元素及其祖先元素中没有'.mask'或'.panel'类时，会隐藏所有具有.panel类的元素。该功能常用于弹窗或面板的关闭逻辑。

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

$(document).on('click', function(e) {
    if (0 == $((e.target || e.srcElement)).closest('.mask,.panel').length) {
        $('.panel').hide();
    }
});

jquery实现点击指定div外区域隐藏该div
04-18
jquery实现点击指定div外区域隐藏该div
jQuery除指定区域外点击任何地方隐藏DIV功能
10-19
在jQuery中，可以使用hide()函数来隐藏元素，使用show()函数来显示元素。例如，$('#overlay').hide()会隐藏id为overlay的元素，$('#overlay').show()会显示id为overlay的元素。 知识点五：阻止事件冒泡 在上述代码...
jquery 点击元素以外任意地方隐藏该元素的方法
风的专栏
04-03 9765
第一先实现点击任何地方都隐藏该元素(假设id="bar") $(document).click(function(){ $("#bar").hide(); }); 那么bar也属于document，点击bar也会让自己隐藏，显然这不是想要的，这时候要阻止冒泡事件，即document的事件对bar无效 $("#bar").click(function(event){ event.
点击某元素之外的地方，隐藏该元素，点击自身不受影响(jQuery)
最新发布
frdsf123的博客
03-21 709
点击一个登录按钮，弹出登录框，该登录框的背景铺满网页（登录框是背景的子元素），点击登录框之外的背景，隐藏该登录框与背景，点击自身不受影响。
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。
weixin_43992788的博客
06-18 415
<head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <title></title> <script type="text/javascript"> $(document).bind('click', function(e) { var e = e || window.e..
jquery点击目标元素以外的地方隐藏该元素
qq_43654065的博客
08-02 788
需求：使用input和ul实现下拉框功能，当用户点击下拉框以外的位置实现关闭下拉框 第一步： 实现点击任何地方隐藏下拉框。 $(document).click(function(){ $(".select").hide() }) 添加该方法后，会发现select下拉框也无法显示。这是因为事件冒泡，当点击input时，冒泡事件会冒泡到document元素上，所以下拉框无法显示，这时候就需要阻止input上的事件冒泡。 第二步： 阻止目标元素上的冒泡。 $(".input").clic
点击元素以外的地方隐藏元素插件
03-28
"点击元素以外的地方隐藏元素插件"，即clickOutHide，是一个基于jQuery的插件，专门用于实现一种交互效果：当用户点击页面上除特定元素之外的任何地方时，该特定元素将自动隐藏。这个插件为开发者提供了一个灵活且...
jquery如何实现点击空白处隐藏元素
10-18
接下来，我们将详细介绍如何利用jQuery来完成点击空白处隐藏元素的特效，并提供相应的代码示例。 首先，要实现点击空白处隐藏元素的功能，我们通常会监听document对象的点击事件。当点击事件发生时，我们需要判断...
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
10-23
5. 显示和隐藏的控制：通过调用jQuery的.hide()方法来隐藏选中的元素，从而实现点击页面其他区域时隐藏下拉菜单和遮罩层的效果。 上述内容中的代码示例演示了如何通过绑定点击事件到document对象，并在事件处理函数...
jq 如何让点击其他地方隐藏_jQuery除指定区域外点击任何地方隐藏DIV功能
weixin_31100705的博客
12-29 1728
具体代码如下所示：$('body').click(function(e) {var target = $(e.target);// 如果#overlay或者#btn下面还有子元素，可使用// !target.is('#btn *') && !target.is('#overlay *')if(!target.is('#btn') && !target.is('#ov...
jquery 点击元素以外任意地方隐藏该元素的方法(事件冒泡)
weixin_34342992的博客
08-22 227
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery点击其他地方隐藏菜单
猫老板的豆
12-23 972
JQ：//点击其他地方隐藏菜单 $.fn.autoHide = function(){ var ele = $(this); $(document).on('touchend',function(e){ if(ele.is(':visible') && (!$(e.target)[0].isEqualNode(ele[0]) && ele.has(e.target).
jquery点击非div区域隐藏div
weixin_30768661的博客
06-08 146
点击非div区域隐藏div，如图，点击圆的头像（.person-msg）弹出白色底框(.person-centre)。点击圆头像以外的区域隐藏白色底框 html代码 <div class="per_c"> <div class="person-msg pull-right"> <img src="../../re...
JQuery控制div外点击隐藏，div内点击不会隐藏
Andyの笔记
01-13 3202
比如有个div其id为body，实现在div外点击隐藏，div内点击不隐藏，采用jQuery实现如下： $("#body").click(function(e) { $(this).show(); e.stopPropagation(); }); $(document).click(function(event) { $("#body").hide(); });
jquery实现点击某元素之外触发事件
YanGo的博客
10-22 2554
　　jq如何实现这个功能呢？其实也不难，大概思路就是，在document上面绑定一个事件，当用户触发document的事件时，判断一下目标元素是什么，然后再执行相应的操作就行了。 CODE: &lt;script&gt; $(function(){ $(document).bind("click",function(e){ //id为menu的...
jq 如何让点击其他地方隐藏_jquery实现点击页面其他地方隐藏指定元素
weixin_35172279的博客
12-29 909
代码实例如下:点击页面其他地方隐藏div-蚂蚁部落*{margin:0px;padding:0px;}.main{cursor:pointer;}.list{border:1px solid black;display:none;}.list li{cursor:pointer;border:1px solid red;list-style:none;}#noPopEvent{width:100p...
JQuery点击指定区域外的任何地方隐藏DIV
似水流年
12-26 1987
参考网上方法： //方法一：         $('body').click(function(e) {             var target = $(e.target);             // 如果#overlay或者#btn下面还有子元素，可使用             // !target.is('#btn *') &amp;&amp; !target.is('#overl...
clickOutHide插件：点击非元素区隐藏功能详解
clickOutHide是一个轻量级且灵活的jQuery插件，通过简单的配置即可实现点击元素外部隐藏元素的功能。它适用于多种场景，有助于增强用户界面交互的体验。开发者在使用时需要正确引入jQuery和插件文件，并按照jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xmode

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值