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

jQuery实现点击div外的区域,来隐藏指定节点的更多相关文章

  1. jquery实现点击div外隐藏div

    html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...

  2. 怎么点击div之外的区域就隐藏这个div啊 找了很久,都没有很好解决

    方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" conte ...

  3. 设立点击ProgressDialog外的区域对话框不消失

    设置点击ProgressDialog外的区域对话框不消失ProgressDialog mpDialog = new ProgressDialog(OrderTable.this);  mpDialog ...

  4. jQuery实现鼠标点击div外的地方div隐藏消失的效果(转)

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

  5. jQuery实现鼠标点击div外的地方div隐藏消失的效果

    css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...

  6. jquery点击div以外的区域触发事件

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. JQuery实现点击div以外的位置隐藏该div窗口

    简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.co ...

  8. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  9. jquery判断点击事件是否为指定区域

    <script type="text/javascript"> $(document).click(function(e){ e = window.event || e ...

随机推荐

  1. JS监听video视频播放时间

    采用原生时间监听element.addEventListener(event, function, useCapture) //监听播放时间 var video = document.getEleme ...

  2. 「JSOI2007」建筑抢修

    传送门 Luogu 解题思路 显然先把所有楼按照报废时间递增排序. 然后考虑 \(1\cdots i-1\) 都能修完, \(i\) 修不完的情况. 显然我们在这 \(i\) 个里面至多只能修 \(i ...

  3. 有关《查找两个List中的不同元素》的问题解答与编程实践

     郑海波 2013-07-08 问题: 有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样查找两个集合中不同的元素呢? ...

  4. C++ Primer Plus 6 笔记(3)

    第5章 1.cout在显示bool值之前将它们转换为int,但cout.setf(ios:: boolalpha)函数调用设置了一个标记,该标记命令cout显示true和false,而不是1和0 2. ...

  5. CodeForces - 876D Sorting the Coins

    题意:有n个数的序列,n个数都为0,每次指定某个数变为1,当序列中第i个数为1,第i+1个数为0时,这两个数可交换,将序列从头到尾进行一次交换记为1次,直到某一次从头到尾的交换中没有任何两个数交换.序 ...

  6. 恒大与FF终达成和解!谁赢了,谁输了?

    去年11月结束的中超,广州恒大以63分的积分落后上海上港5分,排在第二名的位置.恒大恒可惜地没有创造史无前例的联赛八连冠,与新的亚洲纪录失之交臂.但相比球场上的"失意",许家印在商 ...

  7. LInux的服务器编码格式的查看与更改

    1.locale 命令查看字符编码 然后修改/etc/sysconfig/i18n,如改成中文编码: LANG=en_US.UTF-8 改为 LANG="zh_CN.GBK" 然后 ...

  8. 前端构建工具gulp超详细配置, 使用教程(图文)

    流程 1. 输入命令(可以使用git bash或者命令控制台cmd) npm install -g gulp 安装全局gulp命令 2. 创建一个项目文件夹, 当前项目文件夹下输入命令npm init ...

  9. 图片上传--base64

    <?php defined('BASEPATH') OR exit('No direct script access allowed'); include_once (APPPATH . &qu ...

  10. 036、Java中三目运算符的使用

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...