jQuery实现点击div外的区域，来隐藏指定节点

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量102 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cap-rq/p/9967024.html
版权

 

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">  
            $(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' || elem.id == 'test2')) {  
                        return;  
                    }  
                    elem = elem.parentNode;  
                }  
                $('#a').css('display', 'none'); //点击的不是div或其子元素   
            });  
        </script>  
    </head>  
    
    <body>  
        <div id="a">
            <div id="test" style="width: 300px; height: 300px; background-color: palegreen;">
测试测试测试测试 
</div>  
            <div id="test2" style="width:100px;height:100px;background:gold;">测试测试测试测试</div>
        </div>
    </body>  
  
</html>

 

转载于:https://www.cnblogs.com/cap-rq/p/9967024.html

jquery实现点击指定div外区域隐藏该div
04-18
jquery实现点击指定div外区域隐藏该div
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
10-23
标题中提到的关键知识点是使用jQuery实现点击页面其他区域来隐藏下拉div和遮罩层的功能。描述部分则强调了此技术在改善用户体验方面的应用，并指出这是通过响应鼠标事件来动态改变页面元素样式的技术实现。标签部分...
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。
热门推荐
简单就是美
06-07 2万+
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElem
jQuery实现点击div外的区域，来隐藏它自身
付出总会有收获!
10-31 4661
$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是
jQuery/Vue实现的点击div区域外隐藏div区域，冒泡，事件捕获，移入div1,显示div2,移除div1或2，隐藏div2
沧笙踏歌的博客
02-15 486
html <div class="layui-col-xs6"> <div class="header-second-btn"> <div class="header-second-show" id="header-second-show"> 家长版 <i class="layui-icon...
jquery 点击div 以外窗口隐藏的方法
九天工作室
11-17 654
//添加话题 $(".jiahao").on("click",function(e){ var top = $(this).offset().top+25; var left =  $(this).offset().left-34; console.log("---------------top-------------------"+top); console.log("-------
js实现的点击div区域外隐藏div区域
01-19
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。 阻止冒泡：1、stopPropagation()对于非...
DIV外区域Click后关闭DIV的实现代码
12-03
在网页开发中，有时我们需要创建一个可点击的`DIV`元素，当用户点击其他区域时，这个`DIV`会自动关闭。这个问题的核心在于事件处理和事件冒泡的控制。事件冒泡是指事件从最深的节点开始，逐级向上传播到父节点的过程...
jQuery实现动态添加节点与遍历节点功能示例
01-19
本文实例讲述了jQuery实现动态添加节点与遍历节点功能。分享给大家供大家参考，具体如下： 动态添加节点： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...<...script src=jquery-1.10.2.js ...
jquery除指定区域外点击任何地方隐藏DIV
老蔡学代码
08-24 695
html如下： &lt;div class="btn" id="btn"&gt;btn&lt;/div&gt; &lt;div class="box"&gt;&lt;/div&gt; jquery（法一）如下： $('.btn').on('click',function(e){ $('.box').show(); e.stopPropagation(); })
JQuery点击指定区域外的任何地方隐藏DIV
似水流年
12-26 1924
参考网上方法： //方法一：         $('body').click(function(e) {             var target = $(e.target);             // 如果#overlay或者#btn下面还有子元素，可使用             // !target.is('#btn *') &amp;&amp; !target.is('#overl...
jQuery点击空白处隐藏弹出层
无知的博客
06-22 1430
jQuery点击空白处隐藏弹出层 $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可
jquery实现点击div空白处隐藏该div
qq_42967540的博客
09-23 488
<div id="div1"></div> $(document).bind("click",function(e){ var target = $(e.target); if(target.closest("#div1").length == 0){ $("#div1").hide(); } });
jquery 为整个页面绑定click事件，获得当前所在div
群峰之巅的专栏
07-06 9316
jquery 为整个页面绑定click事件，获得当前所在div，代码如下，供参考$(document).bind("click", function (e) { if($(e.target).closest("div").is(
js点击元素之外的地方隐藏该元素
大湿胸的博客
04-28 4942
有时候我们会有这种情况，点击按钮（或者指定元素）显示一个菜单栏，点击按钮和菜单栏外的区域隐藏菜单栏； 主要运用阻止事件冒泡来实现；下面是全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 421
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 1174
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 162
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
jQuery实现节点克隆
05-19
使用jQuery可以很方便地实现节点克隆，可以使用clone()方法来进行克隆，具体步骤如下： 1. 选择要克隆的节点，并使用clone()方法进行克隆，同时将克隆节点保存在一个变量中。 ```javascript var cloneNode = $('#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值