<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

        <title></title>

        <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') {

                        return;

                    }

                    elem = elem.parentNode;

                }

                $('#test').css('display', 'none'); //点击的不是div或其子元素

            });

        </script>

    </head>

    <body>

        <div id="test" style="width: 300px; height: 300px; background-color: #CBC7BC;">

            <table>

            <tr>

            <td>12</td>

            <td>23</td>

            </tr>

            <tr>

            <td>12</td>

            <td>23</td>

            </tr>

            </table>

        </div>

    </body>

</html>

Jquery点击div之外的地方隐藏当前div的更多相关文章

  1. jquery 点击元素以外任意地方隐藏该元素的方法

    文章来源:百度知道 我的思路是给body绑定一个click事件,然后判断当前鼠标点击的区域是当前元素还是元素以外区域,如果点击对象不是当前元素,则隐藏该元素. 假设对象的id为divBtn,则代码如下 ...

  2. 我优化了一下：jquery点击元素以外任意地方隐藏该元素的方法

    我优化了一下 $(document).bind('click', function (event) { var evt = event.srcElement ? event.srcElement : ...

  3. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  4. 点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题

    帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...

  5. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  6. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

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

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  8. jquery点击元素之外触发事件

    $("#errorMsg_layer").bind("click",function(e){ if($(e.target).closest("#err ...

  9. jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

    <div class="Content_top"> <div class="Reserve"> <h3><span c ...

随机推荐

  1. 二十八、layui的日历组件使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. First ServiceStack Service

    博客1:ServiceStack Web Service 创建与调用简单示列 博客2:Hbuilder+vs2017 web api开发app 官方文档:servicestack docs 1.手动下 ...

  3. AngularJS 1.x系列：AngularJS过滤器（4）

    1. AngularJS过滤器(Filter)使用方法 AngularJS中过滤器(Filter)主要功能是格式化数据. AngularJS过滤器使用方法有3种: ◊ 在表达式{{}}中使用 ◊ 在指 ...

  4. Win10图片打不开文件系统错误2147416359解决方法

    该问题表现为win10打开所有图片都会提示这个‘文件系统错误-2147416359’,打开其他文件没问题.此问题应该是win10自带的图片查看器出了故障. 在网上找到如下方案,但是我的服务列表里没有这 ...

  5. react学习目录

    前面的话 React是如今热门的两大前端框架之一,它设计思路独特,性能卓越,逻辑简单,受到了大量开发者的喜爱.Vue的基本思路是基于HTML模板的扩展,而React的基本思路是基于JS语言的扩展.由于 ...

  6. Python之常见算法介绍

    一.算法介绍 1. 算法是什么 算法是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制.也就是说,能够对一定规范的输入,在有限时间内获得所要求的输 ...

  7. [ZJOI2016]旅行者

    题目描述 小Y来到了一个新的城市旅行.她发现了这个城市的布局是网格状的,也就是有n条从东到西的道路和m条从南到北的道路,这些道路两两相交形成n*m个路口 (i,j)(1<=i<=n,1&l ...

  8. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  9. 分布式监控系统开发【day38】:监控数据如何画图（九）

    一.画图代码 1.收集处理数据 class GraphGenerator(object): ''' generate graphs ''' def __init__(self,request,redi ...

  10. 第十七节: EF的CodeFirst模式的四种初始化策略和通过Migration进行数据的迁移

    一. 四种初始化策略 EF的CodeFirst模式下数据库的初始化有四种策略: 1. CreateDatabaseIfNotExists:EF的默认策略,数据库不存在,生成数据库:一旦model发生变 ...