<!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. JS 设计模式三 -- 策略模式

    策略模式 概念 定义一系列算法,把它们一个个封装起来. 将算法的使用与算法的实现分离开来 实现 // 加权映射关系 var levelMap = { S: 10, A: 8, B: 6, C: 4 } ...

  2. 控制结构(4): 局部化（localization）

    // 上一篇:状态机(state machine) // 下一篇:必经之地(using) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一次,我们说到状态机结构( ...

  3. CRM专业术语

    客户关系管理(管理学词汇CRM)_百度百科https://baike.baidu.com/item/%E5%AE%A2%E6%88%B7%E5%85%B3%E7%B3%BB%E7%AE%A1%E7%9 ...

  4. 关于 i++ 与 ++i

    首先关于这个真的不想在看资料了,自己都背过了,++i 和 i++,在单独使用时,就是 i=i+1. a = ++i        相当于 i=i+1; a = i; (先i = i + 1,再使用i的 ...

  5. Java中NIO和IO区别和适用场景

    NIO是为了弥补IO操作的不足而诞生的,NIO的一些新特性有:非阻塞I/O,选择器,缓冲以及管道.管道(Channel),缓冲(Buffer) ,选择器( Selector)是其主要特征. 概念解释: ...

  6. elasticsearch系列七：ES Java客户端-Elasticsearch Java client（ES Client 简介、Java REST Client、Java Client、Spring Data Elasticsearch）

    一.ES Client 简介 1. ES是一个服务,采用C/S结构 2. 回顾 ES的架构 3. ES支持的客户端连接方式 3.1 REST API ,端口 9200 这种连接方式对应于架构图中的RE ...

  7. python 实现聊天室

    所用模块 asyncore 官方介绍, 源码 英文捉鸡点 这里  源码中可以看到其实本质上就对 select 以及 socket 的进一步封装 简单说明 Python的asyncore模块提供了以异步 ...

  8. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  9. class09

    class09 四川菜很辣. Sichuan cuisine is very spicy. 那个汤是凉的. That soup is cold. 这茶很烫. This tea is very hot. ...

  10. Mock6 moco框架中如何加入header

    新建一个 startupWithHeader.json,这次在request里面添加了headers属性 [ { "description": "这是一个带header的 ...