点击区域外隐藏该区域，event.stopPropagation()
- Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
点击区域外隐藏该区域Example:
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8" />
<style type="text/css">
.box {
width:100px;
height:100px;
background:blue;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).click(function() {
$('.box').hide();
})
$('.box').click(function(event) {
event.stopPropagation();
})
});
</script>
</head>
<body>
<div class="box">box</div>
</body>
</html>
点击区域外隐藏该区域，event.stopPropagation()的更多相关文章
- js实现的点击div区域外隐藏div区域(转)
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...
- js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...
- jQuery实现鼠标点击Div区域外隐藏Div
冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...
- js实现点击div以外区域，隐藏div区域
<body style="text-align:center;"> <input type="text" style="width: ...
- jquery实现点击div外隐藏div
html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...
- jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- 【转】Android点击空白区域，隐藏输入法软键盘
原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步 ...
- js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
随机推荐
- 使用C#模拟Outlook发送邮件，代码编译报错
添加OutLook API using OutLook = Microsoft.Office.Interop.Outlook; 发送邮件方法 public void SendEmail() { Out ...
- sql入门基础
好用的mysql客户端 https://www.quora.com/What-is-the-best-free-DB-schema-design-tool https://www.quora.com/ ...
- css基础知识
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.其中选择器通常是您需要改变样式的 HTML 元素(比如p标签),也可以是节点的属性的值(比如id,class):每条声明都是一条字典key ...
- 常见的JAVA包
java.lang 提供利用 Java 编程语言进行程序设计的基础类.最重要的类是 Object(它是类层次结构的根)和 Class(它的实例表示正在运行的应用程序中的类). java.util 包含 ...
- Android界面组件的四种启动方式
Android界面组件启动有四种方式 standard,singleTop,singleTask,singleInstance. standard:每次调用都会都会产生新的组件. singletop: ...
- 利用Properties来读取JDBC配置文件
看到这样的标题,肯定会有人问,要连接数据库我直接验证,加载驱动,建立连接等等按步骤来不就行了,
- rbd snap（1）
来自官方文档: 快照介绍 快照是映像在某个特定时间点的一份只读副本. 对当前镜像打过快照以后,Active层仍在当前镜像,快照文件为只读. Note 如果在做快照时映像仍在进行 I/O 操作,快照可能 ...
- Linux 利用进程打开的文件描述符(/proc)恢复被误删文件
Linux 利用进程打开的文件描述符(/proc)恢复被误删文件 在 windows 上删除文件时,如果文件还在使用中,会提示一个错误:但是在 linux 上删除文件时,无论文件是否在使用中,甚至是还 ...
- Quartz 入门详解
Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...
- Redis在Linux下的安装和启动和配置
第一步:下载Redis安装包,下载版本:3.0.5 在所在目录右键打开终端输入命令: wget http://download.redis.io/releases/redis-3.0.5.tar.gz ...