点击区域外隐藏该区域，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实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
随机推荐
- 关于页面中table中相同的列自动合并
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 对接第三方支付接口-获取http中的返回参数
这几天对接第三方支付接口,在回调通知里获取返回参数,有一家返回的json格式,请求参数可以从标准输入流中获取. //1.解析参数 , 读取请求内容 BufferedReader br; String ...
- 读书笔记：const和readonly、static readonly 那些事
C#中表示不变的量(常量)的两种形式:const 和readonly const 是静态常量 readonly 是动态常量 严格的来讲:const 应该称为常量 而readonly 则应称为只读变量. ...
- Chrome F12学习
Chrome实用调试技巧 Chrome调试工具常用功能整理 Google Chrome开发者工具使用(图文教程) 如何更专业的使用Chrome开发者工具
- java 操作Excel表 创建 查看 修改
需要用到jxl.jar包 修改有两种方法一种是jxl的 另一种需要apache.poi包 package excelChuLi; import java.io.File; import java. ...
- tp的极光推送demo
原文地址:http://blog.csdn.net/zhihua_w/article/details/52197611 极光推送(JPush)是独立的第三方云推送平台,致力于为全球移动应用开发者提供专 ...
- (转)struts2：数据校验，通过XWork校验框架实现（validation.xml）
转载自:http://www.cnblogs.com/nayitian/p/3475661.html struts2:数据校验,通过XWork校验框架实现(validation.xml) 根据输入 ...
- jquery easyui-datagrid/treegrid 清空数据参考
在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者 ...
- GPS部标监控平台的架构设计(十一)-基于Memcached的分布式Gps监控平台
部标gps监控平台的架构,随着平台接入的车辆越来越多,架构也面临越来越大的负载挑战,我们当然希望软件尽可能的优化并能够接入更多的车辆,减少在硬件上的投资.但是当车辆增多到某一个临界点的时候,仍然要面临 ...
- WCF 依赖注入-- Attribute
最近,工作之余学习WCF(Windows Communication Fundation)时,感觉自己还有好多的东西需要学习呀⊙﹏⊙b汗,于是想记录下自己学习WCF的心得,以鼓励自己再接再厉,同时希望 ...