点击区域外隐藏该区域，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实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
随机推荐
- Java工具Eclipse
一.下载Eclipse 从官网渠道下载或从公司共享软件目录下载均可. a) http://www.eclipse.org/downloads/eclipse-packages/ ...
- gradle和maven有什么用？分别有什么区别？
作者:EZLippi链接:http://www.zhihu.com/question/29338218/answer/51293828来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- 【xcode】qt程序不通过qmake，运行找不到动态库的坑
现象:试图在一个已有项目里增加qt的代码,因此手动加入相关framework(未通过qmake生成工程),编译连接都通过,但是运行时崩溃,提示错误: dyld: Library not loaded ...
- Source Insight下提示未完整安装的问题
网上的破解版的注册表文件都是针对32位系统的,所以在64位系统里运行根本无法破解.下面分别贴出这俩系统里的破解文件. 使用方法: 分别复制对应系统的内容,新建文本文档,将内容粘贴进去,重命名为.reg ...
- iscoll制作顶部可以左右滑动的tab
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- JSP数据交互
JSP数据交互 一.jsp中java小脚本 1.<% java代码段%> 2.<% =java表达式%>不能有分号 3.<%!成员变量和函数声明%>二.注释 1 ...
- eclipse下SVN同步时忽略target文件夹
直接干货:window-->preferences-->team-->Ignored Resource-->Add Pattern-->新建一个*/target/*--& ...
- Ubuntu 16.04 LTS发布
[Ubuntu 16.04 LTS发布]Ubuntu 16.04 LTS 发布日期已正式确定为 2016 年 4 月 21 日,代号为 Xenial Xerus.Ubuntu16.04 将是非常受欢迎 ...
- Unix时间戳
Unix时间戳 http://www.linuxidc.com/Linux/2016-01/127572.htm 这里的时间戳,指的就是Unix时间戳(Unix timestamp).它也被称为Uni ...
- Spring操作指南-IoC基础环境配置（基于注解自动装配）
项目源码:http://code.taobao.org/p/LearningJavaEE/src/LearningSpring001%20-%20Automatically%20wiring%20be ...