js实现的点击div区域外隐藏div区域(转)
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。
阻止冒泡：
1、stopPropagation()对于非IE浏览器。
2、cancelBubble属性为true，对于IE浏览器，而Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation();
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js">
</script>
<title>
</title>
</head>
<style type="text/css">
body { background-color:#999999; } #myDiv { background-color:#FFFFFF;
width:250px; height:250px; display:none; }
</style> <body>
<input id="btn" type="button" value="显示DIV" />
<div id="myDiv">
This is a div;
</div>
</body>
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function() {
$("#btn").click(function(event) {
showDiv(); //调用显示DIV方法
$(document).one("click",
function() { //对document绑定一个影藏Div方法
$(myDiv).hide();
}); event.stopPropagation(); //阻止事件向上冒泡
});
$(myDiv).click(function(event) { event.stopPropagation(); //阻止事件向上冒泡
});
});
function showDiv() {
$(myDiv).fadeIn();
}
</script>
js实现的点击div区域外隐藏div区域(转)的更多相关文章
- 点击区域外隐藏该区域，event.stopPropagation()
event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing an ...
- js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...
- jQuery实现鼠标点击Div区域外隐藏Div
冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- 怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.
方法一:1 <script type="text/javascript"> $(function() { $("#toggle").click(fu ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- FormSheet式模态视图，点击模态视图外隐藏模态视图的方法
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
随机推荐
- OGRE 1.9 的第一个程序（OGRE HelloWorld程序）
平台:win7, VS2010 先看运行结果吧: 1. 安装OGRE 下载OGRE SDK 1.9,解压,放在你喜欢的地方,在OGRE SDK文件加下创建“OGRE_HOME.bat.bat”文本文件 ...
- CKEditor使用配置方法
一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src= ...
- icmp_ping学习笔记
1.用字符串指针做为发送缓冲区和接收缓冲区的指针: 2.icmp报文类型结构体可自行定义,也可用<netinet/ip_icmp.h>中定义好的strcut icmp结构体: 3.ip_h ...
- eclipse中安装Open Explorer
刚刚解压的eclipse中一般没有下面如图所示的这个操作,不能快速进入所选中的文件在Windows资源管理器所在的目录 我们需要下载OpenExplorer.jar包,放到eclipse解压后的dro ...
- Android深度探索HAL与驱动开发 第四章 源代码下载和编译
前面说过Android移植主要就是Linux内核的移植,而Linux内核移植主要是Linux驱动的移植,所以为了开发和测试Linux驱动,有必要学习在Ubuntu Linux下如何搭建两套开发环境:A ...
- sae flask 微信公众平台开发
index.wsgi启动服务文件 import sae from evilxr import app application = sae.create_wsgi_app(app) evilxr.py ...
- 学习css中得与惑
css的学习分享 所学的css知识看多,会看懂.这只是在实践中发现的问题: 一. ???h1比div还大 h1上下有边距 为什么浮动不了 (现不知道) 二. css写了 表现不出来.... ...
- Chapter 3: Develop the user experience
Plan for search engine optimization and accessibility 使用analytical tools分析HTML,如SEO toolkit from MS, ...
- Matlab 进阶学习记录
最近在看 Faster RCNN的Matlab code,发现很多matlab技巧,在此记录: 1. conf_proposal = proposal_config('image_means', ...
- 更新日志(建议升级到2016.12.17) && 更新程序的方法
更新程序的方法: 1,在控制面板里点击备份当前数据库文件到磁盘,把当天获取的信息从内存写到磁盘/存储卡.2,下载最新版的源码 wget -O "infopi.zip" " ...