<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. pdo连接mysql操作方法

    PDO常用方法: PDO::query()主要用于有记录结果返回的操作(PDOStatement),特别是select操作. PDO::exec()主要是针对没有结果集合返回的操作.如insert,u ...

  2. Java并发编程（三）：并发模拟（工具和Java代码介绍）

    并发模拟工具介绍 ① Postman : Http请求模拟工具 从图上我们可以看出,Postman模拟并发其实是分两步进行操作的.第一步:左边的窗口,在窗口中设置相关接口以及参数,点击运行进行第二步. ...

  3. 蓝牙(CoreBluetooth)-概述

    蓝牙(CoreBluetooth)-概述 通过此框架可以让你的Mac和iOS应用程序与外部蓝牙设备通信 外部设备: 就是需要通过iOS App控制器的其他设备: 例如:心率检测仪.数字温控器 蓝牙通讯 ...

  4. maven仓库国内镜像

    <mirror>        <id>alimaven</id>        <name>aliyun maven</name>     ...

  5. CCNA2.0笔记_路由相关

    路由器的工作内容 -路由器知道目标地址 -发现到达目标地址的可能的路由 -选择最佳路径(路由表) -维护路由信息 路由的来源 直连路由:直接连到路由器上的网络 -初始化情况下,路由器所知的网络,只有其 ...

  6. Struts1小案例问题教训总结（含中文乱码问题及解决）

    1. 提交form后页面空白,没有任何显示,Debug发现form的validate()以及action的execute()根本没有被调用. 原因:validate()和execute()有2个互为o ...

  7. 如何查看iis的连接数量

    引用:http://jingyan.baidu.com/article/54b6b9c0f3c2002d583b470d.html 运行,输入,perfmon.msc.   在系统监视器,区域点击,添 ...

  8. npm太慢， 淘宝npm镜像使用方法[转]

    淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...

  9. Java Drp项目实战——Web应用server

    引言 Web应用server如今非常多人都在用,但是究竟什么是Web应用server呢,它与Webserver有什么关系,它与应用server又是什么关系,它是他们两种中的当中一种,还是简单的两种se ...

  10. 用TortoiseSVN忽略文件或文件夹(ignore)（网络摘抄记录）

    Android项目需要协同一起开发时,就需要保证项目同步完整性.SVN忽略文件列表:.gradle .idea build local.properties *.iml app/*.iml app/b ...