<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. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  2. 智能指针tr1::shared_ptr、boost::shared_ptr使用

    对于tr1::shared_ptr在安装vs同一时候会自带安装,可是版本号较低的不存在.而boost作为tr1的实现品,包括 "Algorithms Broken Compiler Work ...

  3. Enable multithreading to use std::thread: Operation not permitted问题解决

    在用g++ 4.8.2编译C++11的线程代码后,运行时遇到了如下报错: terminate called after throwing an instance of 'std::system_err ...

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

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

  5. linux设置时间的方法

    0. date -R  中国上海的时区是+8000 1.tzselect 设置时区,依次选择5,9,1,1(如果时区不一样,执行下面的命令得到之后时间是不一样的) 2.sudo ntpdate asi ...

  6. Unable to parse request org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. null

    最近做一个web项目中有上传文件的功能,已经写出并在本地和部署到服务器上测试了好几个文件上传都没问题(我用的是tomcat).部署上服务器,上传图片时有的图片大就回在tomcat日志报如下错误: Un ...

  7. php+mysqli实现批量执行插入、更新及删除数据的方法

    本文实例讲述了php+mysqli实现批量执行插入.更新及删除数据的方法.分享给大家供大家参考.具体如下: mysqli批量执行插入/更新/删除数据,函数为 multi_query(). 下面的代码只 ...

  8. php ajax dom---动态增加

    js代码 <script type="text/javascript"> $(document).ready(function(){ $("#talk_sen ...

  9. 关键字final 分别修饰一个类，一个方法，一个变量，各起什么作用

    关键字final 分别修饰一个类,一个方法,一个变量,各起什么作用 解答:final修饰类是不能被继承 fianl修饰方法不能在子类中被覆盖 final修饰变量,称为常量,初始化以后不能改变值.

  10. 网络协议之ts---ts 流分析详解

    名词缩写翻译: es:elements stream 基本流 pes:packet elements stream 打包流 pts:presentation time stamp 显示时间戳 dts: ...