<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>网页特效展示中心</title>

 <style type="text/css">

 #testa,#testa2{position:relative;}

 #pop,#pop2 { width:100px; height:130px; position:absolute; left:0px; top:20px; border:solid red 1px;background:white; z-index:9999;}

 </style>

 </head>

 <body>

 <script type="text/javascript" src="cxx/jquery.min.js"></script>

 <script type="text/javascript">

 function toggle(id)

 {

 var id = document.getElementById(id);

 if(id.style.display == 'none')

 {

 id.style.display = 'block'

 }

 else

 {

 id.style.display = 'none';

 }

 }

 function dealBlankDivHide(e, id ,destinationid)

 {

 var target = $(e.target);

 if(target.closest("#"+id).length == 0){

 var id = document.getElementById(destinationid);

 if(id.style.display == 'block')

 {

 id.style.display = 'none'

 }

 }

 }

 $(function(){

 $(document).bind("click",function(e){

 dealBlankDivHide(e, 'testa','pop');

 dealBlankDivHide(e, 'testa2','pop2');

 })

 })

 </script>

 <span id="testa">

 <a onclick="toggle('pop')">onclick</a>

 <div id="pop" style="display:none;">

 <input type="checkbox" name = "test1"/>test1

 <input type="checkbox" name = "test2"/>test2

 <input type="checkbox" name = "test3"/>test3

 <input type="checkbox" name = "test4"/>test4

 <input type="checkbox" name = "test5"/>test5

 </div>

 <span>

 <span id="testa2">

 <a onclick="toggle('pop2')">onclick</a>

 <div id="pop2" style="display:none;">

 <input type="checkbox" name = "test1"/>test11

 <input type="checkbox" name = "test2"/>test22

 <input type="checkbox" name = "test3"/>test33

 <input type="checkbox" name = "test4"/>test44

 <input type="checkbox" name = "test5"/>test55

 </div>

 <span>

 </br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 </body>

 </html>

jquery点击div以外的区域触发事件的更多相关文章

  1. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

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

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

  3. Jquery点击div之外的地方隐藏当前div

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

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

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

  5. jQuery点击div其他地方隐藏div

    $(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist&quo ...

  6. jQuery监听文本框值改变触发事件（propertychange）

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. 【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框

    引用:https://blog.csdn.net/rui276933335/article/details/45717461 JSP: <td class="as1"> ...

  8. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  9. target属性用于返回最初触发事件的DOM元素。

    target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...

随机推荐

  1. 在同一台服务器上启动多个 FreeSWITCH 实例

    有时候,需要用到多个FreeSWITCH进行测试,或者需要在一台服务器上部署多个“不兼容”的系统.我们在这一节探讨一下怎么做. 背景故事 几年前我还在Idapted工作的时候,由于需要连接Skype及 ...

  2. Nginx(一)：linux下安装nginx与配置

    linux系统为Centos 64位 准备目录 [root@instance-3lm099to ~]# mkdir /usr/local/nginx [root@instance-3lm099to ~ ...

  3. linux Apache CGI 安装配置

    Apache 中的提交了一种利用扩展应用程序执行动态网页的机制. 称为Common Gateway Interface (通用网关接口)简称CGI. 本文假定已安装好linux(本文的linux版本为 ...

  4. 使用 OpCache 提升 PHP 性能

    使用 OpCache 提升 PHP 性能 wdd2007wdd2007 .6k 1月29日 发布 推荐 推荐 收藏 收藏,.3k 浏览 OpCache 通过对 opcode 的缓存和优化来提升 PHP ...

  5. iOS图片上传及压缩

    提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. 使用UIImagePickerContr ...

  6. href中使用相对路径访问上级目录的方法

    项目ProjectXXX目录如下: WebContent> hello.jsp Folder1> foo.jsp Folder2> foo2.jsp 在foo.jsp中访问hello ...

  7. pow函数

    pow函数如果直接强制类型转换成int,会导致精度的损失.如果是int的幂计算,建议重写函数.或者用double型进行计算.

  8. linux-centos jdk安装

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  9. POSTGRESQL 9.1 FATAL: password authentication failed for user "postgres"

    1.配置postgreql 可以远程访问: sudo vim /etc/postgresql/9.1/main/postgresql.conf root@ubuntuserver:~# sudo vi ...

  10. javascript属性详解

    在js中,没有公共属性和私有属性之分,只有全局变量(全局属性)和局部变量以及对象属性.但是,程序员可以通过一定的技巧来实现面向对象语言的功能.下面我们来介绍这几种属性(变量) 全局变量也叫全局属性 / ...