点击区域外隐藏该区域，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实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
随机推荐
- GCC编译C代码
C程序的编译过程 常用文件的后缀名: gcc编译c代码 1.gcc 常用编译选项: 2.gcc编译方法 testc.c: #include <stdio.h> int main ...
- iOS用户信息单例的创建
UserInfo.h + (UserInfo *) sharedInstance; UserInfo.m #import "UserInfo.h" static UserInfo ...
- 我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)
我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...
- 对于似1/(1+x^4)型的不定积分的总结
最近在求解一道不定积分的经典例题时遇到了一点小麻烦.的确,在处理1/(1+x^4)积分的时候,需要一定的技巧性,不然会使计算量变得庞大. 下面,我简单的总结了类似结构不定积分的求解方法,希望大家看完之 ...
- Wordpress基础：安装主题和插件
一:安装主题 1.下载主题 2.解压至wordpress目录下的/wp-content/themes 3.访问后台>外观>主题启用即可 二:安装插件 1.下载插件 2.解压至wordpre ...
- MySQL 插入数据 通过命令提示窗口插入数据
MySQL 表中使用 INSERT INTO SQL语句来插入数据. 你可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 语法 以下为向MySQL数据表插 ...
- SQL编码乱码解决方法
摘自 http://www.cnblogs.com/keke/archive/2011/08/05/2128557.html 使用SQL SERVER2005的时候常常遇到中文字符为乱码的情况,经过研 ...
- iOS 自定义键盘ToolBar（与键盘的弹出、收起保持一致）
1.监听键盘改变的通知 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyBoardWillCha ...
- JMeter学习-027-JMeter参数文件（脚本分发）路径问题：jmeter.threads.JMeterThread: Test failed! java.lang.IllegalArgumentException: File distributed.csv must exist and be readable解决方法
前些天,在进行分布式参数化测试的时候,出现了如题所示的错误报错信息.此文,针对此做一个简略的重现及分析说明. JMX脚本线程组参数配置如下所示: 参数文件路径配置如下所示: 执行JMX脚本后,服务器对 ...
- rbd cache （一）
cache 1.why The existence of cache is based on a mismatch between the performance characteristics of ...