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 ...
随机推荐
- Javascript 右移0位的作用
Javascript 中右移0位可以用来快速去掉小数,关于位移运算的定义: 右移运算是将一个二进制位的操作数按指定移动的位数向右移动,移出位被丢弃,左边移出的空位或者一律补0,或者补符号位. 实际看下 ...
- tab切换效果
选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...
- ImageLoader框架的使用、调用系统相册显示图片并裁剪显示、保存图片的两种方式
ImageLoader虽然说是一个相对于比较老的一个框架了 ,但是总的来说,还是比较好用的,今天我就总结了一下它的用法.还有调用系统相册并裁剪,以及,通过sharedpreference和文件存储来保 ...
- 粗略了解struts2
花了半天的时间再把struts2详细拟了一遍,之前用习惯了servlet加jsp,再看struts2的时候终于明白为什么大家都愿意学,以人类天生的惰性,要让他们愿意去学习一个新的东西,这东西一定可以让 ...
- Docker搭建Java Web运行环境
1. 前提条件 安装了Docker的64位Linux 操作系统 Linux操作系统镜像 Linux版本的JDK压缩包 Linux版本的Tomcat压缩包 2. 启动容器 容器是在镜像的基础上来运行的, ...
- javascript 正在加载中，请稍后效果实现
/*蒙版*/ .loading-mask { width: 100%; height: 100%; position: fixed; top:; left:; right:; bottom:; bac ...
- RestEasy 3.x 系列之三：jsonp
跨域请求解决方法(JSONP, CORS)提到解决跨域可以使用jsonp,RestEasy自带jsonp的拦截器 一.RestEasy的文档如下: If you're using Jackson, R ...
- C# 更新SQL Server数据库备注信息从另一数据库
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- mylistview 中item的子项的布局文件xml
@Override public View getView(final int position, View view, ViewGroup parent) { System.out.println( ...
- 简单MVC项目搭建--Java1.7+Eclipse luna + Maven 3.2.5 +spring 4.1.4
转载请注明出处:http://www.cnblogs.com/mybest/p/4265872.html 1. 环境配置 a) Java 1.7 b) Eclipse ...