点击区域外隐藏该区域，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实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
随机推荐
- Cocos引擎开发者指南(1-5)
Cocos引擎开发者指南 英文原版:http://www.cocos2d-x.org/docs/programmers-guide/1/ 中午翻译:http://www.cocos.com/doc/t ...
- json转js对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- org.springframework.web.servlet.DispatcherServlet noHandlerFound
1 请求URL: http://localhost:8080/mvc/rojas 2 control RequestMapping : @RequestMapping(value="xx ...
- java中Collections.sort排序详解
Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能:如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e,f, ...
- Orcal函数
where b.rn between 4 and 6--日期函数select sysdate from dual--返回两个日期select months_between(to_date('2017- ...
- PostgreSQL windows service启动失败
from: http://stackoverflow.com/questions/1251233/unable-to-run-postgresql-as-windows-servicepg_ctl - ...
- sqlite数据库相关总结
1. sqlite是轻量型.关系型管理系统,是嵌入式的,占用资源低.可移植性强,比mySql处理速度快,现在主流的版本是sqlite3 2. sqlite中的数据类型有TEXT(字符串,采用UTF-8 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- 基于HTML5和JS实现的切水果游戏
切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...