JQuery控制点击div外部隐藏而内部点击不隐藏的方法

CgbAutoit

于 2023-09-29 07:45:53 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript js

本文链接：https://blog.csdn.net/CgbAutoit/article/details/133407620

js 专栏收录该内容

300 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用jQuery控制点击div外部时隐藏指定div，而在div内部点击时不隐藏。通过利用事件冒泡原理，结合代码示例解释了如何阻止事件冒泡以达到预期效果。

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

在Web开发中，经常会遇到需要在用户点击页面上的某个元素时隐藏其他元素的需求。在这种情况下，我们通常希望点击元素外部区域时隐藏指定的div，但是点击div内部区域时不触发隐藏操作。本文将介绍使用jQuery实现这一功能的方法，并提供相应的源代码。

首先，我们需要了解事件冒泡（event bubbling）的概念。事件冒泡是指当一个元素上的事件被触发时，它会向父元素传播，直到传播到文档根节点。利用事件冒泡，我们可以判断点击事件发生的位置是否在指定的div外部。

下面是实现点击div外部隐藏的jQuery代码：

$(document).ready(function() {
   
   
  // 当点击文档时触发

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CgbAutoit

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

使用jQuery点击其他元素隐藏div元素

TechCraze的博客

09-27

255

然后，我们检查点击事件的目标元素是否是id为"target"的元素，以及点击事件的目标元素是否在class为"box"的div元素内部。如果不满足这两个条件，即点击了除目标元素和div元素之外的其他元素，则隐藏所有的div元素。在jQuery中，我们可以使用事件处理函数来响应用户的操作，例如点击其他元素时隐藏特定的div元素。通过这段代码，当用户点击除目标元素和div元素之外的其他地方时，div元素将被隐藏。而当用户点击目标元素时，div元素将显示或隐藏，以实现点击其他元素隐藏div元素的效果。

jquery实现点击指定div外区域隐藏该div

04-18

jquery实现点击指定div外区域隐藏该div

1 条评论您还未登录，请先登录后发表或查看评论

jQuery实现点击其他地方div隐藏

weixin_37212349的博客

04-23

727

$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是div子元素 if (elem.id && elem.id == 'test') { ret

jQuery实现点击div外的区域，来隐藏它自身

付出总会有收获!

10-31

4707

$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是

jquery除指定区域外点击任何地方隐藏DIV

老蔡学代码

08-24

725

html如下： <div class="btn" id="btn">btn</div> <div class="box"></div> jquery（法一）如下： $('.btn').on('click',function(e){ $('.box').show(); e.stopPropagation(); })

JQuery控制div外点击隐藏而div内点击不会隐藏的方法

10-24

本文讲述的是如何利用JQuery实现一个特定的功能：当用户点击div外部时，div会被隐藏；而当用户在div内部点击时，div则不会隐藏。为了达到这一目的，本文涉及了JQuery中的几个核心方法，它们包括show、hide以及...

jQuery基于闭包实现的显示与隐藏div功能示例

10-18

在本示例中，我们探讨了如何利用jQuery和闭包技术来实现在网页上动态地显示和隐藏div元素。闭包是一种高级JavaScript编程技巧，它允许函数访问并操作其外部作用域中的变量，即使该函数在其外部作用域已经执行完毕。 ...

jQuery实现点击任意位置弹出层外关闭弹出层效果

10-21

在网页开发中，有时我们需要创建一种交互体验，即点击页面上的特定按钮后，会在页面上弹出一个包含详细信息的层（通常是一个div），而当用户点击弹出层之外的区域时，弹出层会自动关闭。这种效果可以增强用户体验，...

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...

js实现点击div之外区域,隐藏div

weixin_43239880的博客

05-04

3444

之前在学习的时候，发现别人用了这个contains属性，感觉还是很好用的，记录一下，以免忘记。在监听事件中，判断左侧盒子不包含点击的位置时，则关闭左侧盒子。js 判断是否包含某个DOM元素使用contains。点击左侧弹框之外的区域，会将左侧弹框关闭。

jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。

06-07

jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElement(IE)，这个属性标识了触发事件的原始元素，思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序，在事件处理程序中判读事件源是否为id==test的div元素或其子元素，如果是则方法return不做操作，如果不是则隐藏该div。参考文档：http://blog.csdn.net/u014175572/article/details/51602502

jquery点击其他地方隐藏div层的实现程序

a13520165516的博客

06-10

196

js代码 $(document).ready(function() { //语言头部的点击事件，显示语言列表 $(".language_selected").click(function(e) { $(".language_list").toggle(); e.stopPropagation(); //阻止事件冒泡，否则事件会冒泡到下面的文档点击事件 }); ...

jQuery实现鼠标点击Div区域外隐藏Div

weixin_30443731的博客

06-01

610

冒泡定义：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。（摘自网络） 1. 阻止事件冒泡, 并不阻止事件行为：event.stopPropagation(); $(function() { $("#link").click(funct...

js/jq 点击按钮显示div,点击页面其他任何地方隐藏div

zcy_csdn123的博客

05-28

3014

https://blog.csdn.net/YangBingX/article/details/78644486

jquery 点击其他地方隐藏div

a976134036的博客

01-25

3462

&lt;i class="layui-icon operationbtn" style="float: right"&gt;&amp;#xe671;&lt;/i&gt; &lt;ul style="position: absolute;display: block;" class="op

点击其他地方隐藏div

Poker Man

12-09

871

点击其他地方隐藏div代码块语法遵循标准markdown代码，例如：//点击其他地方隐藏div $(document).on("click",function(e){ if($(e.target).parents(".info-box").length == 0){ $(".jq_hidebox").addClass("hide"); } }); info-box是父

JQuery点击指定区域外的任何地方隐藏DIV

似水流年

12-26

1987

参考网上方法： //方法一： $('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素，可使用 // !target.is('#btn *') && !target.is('#overl...

jq 如何让点击其他地方隐藏_点击页面其他地方隐藏div

weixin_35906794的博客

12-29

387

登录收藏本站相应的js代码document.onmousedown=function(event){var e=event ||window.event;var elm=e.srcElement || e.target;if(elm.id=="manage_area"){if(jQuery('.login').css("display")=="none"){jQuery('.l...

jQuery 实现点击div以外其他地方隐藏div

mentalitys的博客

07-28

957

<p> <a href="javascript:void(0)" class="a">按钮</a> </p> <div class="menu"> <p>显示弹窗</p> </div> $(".a").on("click", function(e){ if($(".menu").is(":hidden")){ $(".menu").show(); }else{ $("..